/* ============================================================ Chess Bloom — Bevel Preset System (Phase A foundation) Inspired by 50 SETTINGS_TEMPLATES from preview (18).html ---------------------------------------------------------------- Design philosophy: each preset captures a recognizable look from the user's canvas-based 3D rendering experiments and translates it to a self-contained CSS recipe (background + box-shadow + border). Apply via [data-bevel=""] on any element. Light direction key (matching preview18.html lightAngle): 315° ↗ light from top-right → highlight top-right edge 225° ↖ light from top-left → highlight top-left edge 45° ↘ light from bottom-right → highlight bottom-right edge 135° ↙ light from bottom-left → highlight bottom-left edge 180° ← light from right → horizontal highlight 270° → light from left → horizontal highlight (reverse) Each preset declares 3 sub-tokens: --bevel-{name}-bg → background composition (gradients) --bevel-{name}-shadow → box-shadow stack (drop + ao + insets) --bevel-{name}-border → border (typically 1px transparent glass edge — use 0 for sharp pills) Override via inline style: --bevel-tint, --bevel-radius, etc. ============================================================ */ :root { /* === Shared base tints (rose+plum brand) ===================== */ --bevel-tint-rose: rgba(216, 24, 121, .28); --bevel-tint-rose-soft: rgba(216, 24, 121, .14); --bevel-tint-rose-deep: rgba(196, 26, 100, .42); --bevel-tint-gold: rgba(255, 184, 92, .32); --bevel-tint-plum: rgba(88, 32, 63, .34); --bevel-tint-lavender: rgba(141, 120, 180, .26); --bevel-pearl-top: rgba(255, 255, 255, .96); --bevel-pearl-mid: rgba(255, 255, 255, .68); /* ============================================================ TIER 1 — HERO BEVELS Heavy 3D, max premium feel — for victory/start/puzzle modals ============================================================ */ /* hero-candy — flat canvas + 3D frame (картина с багетом) Body is FLAT (subtle pearl gradient only). 3D depth lives entirely in the multi-band frame around the edges. Per-band tube shading uses offset inset shadows that highlight the TOP of each ring and shadow the BOTTOM, simulating molded relief. */ --bevel-hero-candy-bg: /* Subtle, MOSTLY FLAT inner canvas — just slight cream-rose tint */ linear-gradient(180deg, #fff5fa 0%, #ffe7f2 100%); --bevel-hero-candy-shadow: /* === outer drop shadow stack === */ 0 28px 56px rgba(216, 24, 121, .36), 0 10px 20px rgba(196, 26, 100, .26), 0 0 0 1px rgba(255, 200, 224, .54), /* === MULTI-BAND FRAME WITH PER-RING TUBE SHADING === Each ring stripe gets a triplet: (a) base color at spread N (b) lighter highlight at spread N-1, offset DOWN 1px → exposes the lighter color along the TOP edge of the ring (c) darker shadow at spread N-1, offset UP 1px → exposes the darker color along the BOTTOM edge of the ring This simulates a tubular molded profile per band (3D rim). */ /* Stripe 1 — outer plum hairline (0-1px) — flat */ inset 0 0 0 1px rgba(116, 18, 70, .42), /* Stripe 2 — rose accent (1-2px) */ inset 0 0 0 2px rgba(255, 144, 203, .42), /* Stripe 3 — white hairline (3-4px) */ inset 0 0 0 4px rgba(255, 255, 255, .96), /* Stripe 4 — GOLD ACCENT TUBE (4-5px) — strongest 3D */ inset 0 0 0 5px rgba(255, 184, 92, .68), /* gold base */ inset 0 1px 0 4px rgba(255, 232, 168, .92), /* gold TOP highlight */ inset 0 -1px 0 4px rgba(160, 90, 30, .72), /* gold BOTTOM shadow */ /* Stripe 5 — pearl plate (5-7px wide, big tube) */ inset 0 0 0 7px rgba(255, 250, 244, .98), /* pearl base */ inset 0 1px 0 6px rgba(255, 255, 255, 1), /* pearl TOP brilliant */ inset 0 -1px 0 6px rgba(196, 140, 110, .58), /* pearl BOTTOM */ /* Stripe 6 — inner rose recess (7-8px) */ inset 0 0 0 8px rgba(216, 24, 121, .22), inset 0 1px 0 7px rgba(255, 144, 180, .56), /* recess TOP edge sheen */ inset 0 -1px 0 7px rgba(80, 12, 40, .62); /* recess BOTTOM dark groove */ --bevel-hero-candy-border: 0; /* hero-premium — flat canvas + 3D frame, refined pearl palette */ --bevel-hero-premium-bg: /* Subtle warm-cream canvas */ linear-gradient(180deg, #fffaf4 0%, #fff2f8 100%); --bevel-hero-premium-shadow: /* outer drop */ 0 32px 64px rgba(196, 50, 126, .32), 0 12px 22px rgba(116, 18, 70, .22), 0 0 0 1px rgba(255, 200, 224, .58), /* multi-band frame with per-ring tube shading */ inset 0 0 0 1px rgba(116, 18, 70, .32), inset 0 0 0 2px rgba(255, 200, 224, .56), inset 0 0 0 4px rgba(255, 255, 255, .96), /* Gold tube (4-5px) */ inset 0 0 0 5px rgba(255, 184, 92, .56), inset 0 1px 0 4px rgba(255, 230, 170, .86), inset 0 -1px 0 4px rgba(160, 100, 40, .58), /* Pearl plate tube (5-7px) */ inset 0 0 0 7px rgba(255, 250, 244, .96), inset 0 1px 0 6px rgba(255, 255, 255, 1), inset 0 -1px 0 6px rgba(196, 140, 110, .42), /* Inner rose recess (7-8px) */ inset 0 0 0 8px rgba(196, 50, 126, .14), inset 0 1px 0 7px rgba(220, 140, 170, .42), inset 0 -1px 0 7px rgba(80, 24, 56, .42); --bevel-hero-premium-border: 0; /* hero-jewel — flat canvas + 3D frame with WIDE gold tube + halo. Most premium feel: outer gold glow + heavy tube shading on rings */ --bevel-hero-jewel-bg: /* Slightly more saturated canvas — warm with magenta hint */ linear-gradient(180deg, #fde8f1 0%, #fbd5e6 100%); --bevel-hero-jewel-shadow: /* outer multi-stop drop with GOLD halo */ 0 32px 64px rgba(196, 26, 100, .48), 0 14px 28px rgba(116, 12, 60, .38), 0 0 40px rgba(255, 184, 92, .42), /* GOLD halo signature */ 0 0 0 1px rgba(255, 200, 224, .68), /* multi-band stripes (read inside-out) with per-ring tube shading */ inset 0 0 0 1px rgba(154, 16, 78, .56), inset 0 0 0 2px rgba(255, 144, 203, .42), inset 0 0 0 4px rgba(255, 255, 255, .96), /* WIDE GOLD TUBE (4-6px = 2px wide) — strongest 3D */ inset 0 0 0 6px rgba(255, 213, 74, .82), /* gold base */ inset 0 1px 0 5px rgba(255, 240, 180, 1), /* gold TOP brilliant */ inset 0 2px 0 4px rgba(255, 248, 220, .82), /* gold TOP soft falloff */ inset 0 -1px 0 5px rgba(150, 80, 20, .82), /* gold BOTTOM dark */ inset 0 -2px 0 4px rgba(120, 60, 10, .56), /* gold BOTTOM deep */ /* Pearl warm plate (6-8px wide tube) */ inset 0 0 0 8px rgba(255, 240, 220, .98), inset 0 1px 0 7px rgba(255, 255, 240, 1), inset 0 -1px 0 7px rgba(180, 120, 90, .58), /* Inner deep plum recess (8-9px) */ inset 0 0 0 9px rgba(116, 12, 60, .42), inset 0 1px 0 8px rgba(180, 60, 110, .56), inset 0 -1px 0 8px rgba(46, 8, 24, .82); --bevel-hero-jewel-border: 0; /* hero-deep — flat darker canvas + 3D frame with rose accent (no gold). Matte/dramatic palette for error/loss moments. */ --bevel-hero-deep-bg: /* Subtle dim canvas — pinker, slightly muted */ linear-gradient(180deg, #ffe5f0 0%, #fdcbe0 100%); --bevel-hero-deep-shadow: 0 28px 56px rgba(80, 24, 56, .48), 0 12px 24px rgba(46, 8, 24, .38), 0 0 0 1px rgba(216, 24, 121, .42), /* multi-band frame — rose & plum (no gold for dramatic feel) */ inset 0 0 0 1px rgba(46, 14, 32, .68), inset 0 0 0 2px rgba(154, 16, 78, .56), inset 0 0 0 4px rgba(255, 255, 255, .82), /* Rose tube (4-5px) */ inset 0 0 0 5px rgba(216, 24, 121, .68), inset 0 1px 0 4px rgba(255, 144, 180, .82), inset 0 -1px 0 4px rgba(116, 12, 60, .82), /* Pearl plate tube (5-7px) */ inset 0 0 0 7px rgba(255, 220, 230, .92), inset 0 1px 0 6px rgba(255, 240, 248, 1), inset 0 -1px 0 6px rgba(140, 60, 90, .68), /* Inner deep plum recess (7-8px) */ inset 0 0 0 8px rgba(58, 18, 42, .42), inset 0 1px 0 7px rgba(120, 50, 80, .68), inset 0 -1px 0 7px rgba(28, 4, 16, .82); --bevel-hero-deep-border: 0; /* ============================================================ TIER 2 — CARD BEVELS Medium 3D, balanced depth — for general-purpose cards ============================================================ */ /* card-production — inspired by 39 Production balanced mid-everything, the safe default for any standard card */ --bevel-card-production-bg: radial-gradient(ellipse 60% 40% at 26% 16%, rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, 0) 38%), linear-gradient(165deg, #ffeef6 0%, #ffd9e6 60%, #ffc1d6 100%); --bevel-card-production-shadow: 0 18px 36px rgba(196, 50, 126, .26), 0 6px 14px rgba(116, 18, 70, .18), 0 0 0 1px rgba(255, 200, 224, .42), inset 0 2px 0 rgba(255, 255, 255, .92), inset 0 -2px 6px rgba(196, 50, 126, .14); --bevel-card-production-border: 1px solid rgba(255, 255, 255, .82); /* card-pearl — inspired by 07 Pearl soft desaturated, soft normal, low specular — restrained pearl finish */ --bevel-card-pearl-bg: radial-gradient(ellipse 70% 50% at 30% 12%, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, 0) 44%), linear-gradient(165deg, #fff8fb 0%, #f5d1dd 60%, #e7b4c7 100%); --bevel-card-pearl-shadow: 0 14px 28px rgba(184, 107, 139, .24), 0 4px 10px rgba(116, 18, 70, .12), 0 0 0 1px rgba(255, 248, 251, .82), inset 0 1px 0 rgba(255, 255, 255, .96), inset 0 -1px 4px rgba(184, 107, 139, .12); --bevel-card-pearl-border: 1px solid rgba(247, 230, 238, .96); /* card-toy — inspired by 13 Soft toy plastic warm pink, mid-normal, gentle volume — playful but not loud */ --bevel-card-toy-bg: radial-gradient(ellipse 60% 50% at 24% 14%, rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, #fff4f9 0%, #ffc0d6 100%); --bevel-card-toy-shadow: 0 16px 32px rgba(214, 110, 153, .26), 0 5px 12px rgba(116, 18, 70, .16), 0 0 0 1px rgba(255, 200, 224, .48), inset 0 2px 0 rgba(255, 255, 255, .9), inset -1px -2px 6px rgba(214, 110, 153, .14); --bevel-card-toy-border: 1px solid rgba(255, 200, 224, .68); /* card-clean — inspired by 31 Minimal clean low-volume, near-flat, for utility containers (no hierarchy claim) */ --bevel-card-clean-bg: linear-gradient(180deg, #fffaf4 0%, #fff5fa 100%); --bevel-card-clean-shadow: 0 8px 18px rgba(196, 50, 126, .12), 0 2px 4px rgba(46, 14, 32, .08), inset 0 1px 0 rgba(255, 255, 255, .92); --bevel-card-clean-border: 1px solid rgba(255, 200, 224, .42); /* ============================================================ TIER 3 — PRIMARY CTA BEVELS Heavy gradient + bold shadow — for "main action" buttons ============================================================ */ /* button-bold — flat magenta canvas + 3D rose-gold frame ring */ --bevel-button-bold-bg: /* Flat magenta with subtle vertical shift */ linear-gradient(180deg, #ff5fa8 0%, #d71879 100%); --bevel-button-bold-shadow: 0 18px 32px rgba(216, 24, 121, .48), 0 6px 12px rgba(196, 26, 100, .36), 0 0 0 1px rgba(255, 144, 203, .56), /* 3-stripe frame for buttons (compact) */ inset 0 0 0 1px rgba(255, 200, 224, .42), /* outer pearl hairline */ /* Bright tube on outer 2px ring */ inset 0 0 0 2px rgba(255, 200, 224, .56), inset 0 1px 0 1px rgba(255, 245, 252, .92), /* TOP highlight */ inset 0 -1px 0 1px rgba(116, 12, 60, .72); /* BOTTOM groove */ --bevel-button-bold-border: 0; /* button-magenta — flat magenta canvas + 3D pearl frame */ --bevel-button-magenta-bg: linear-gradient(180deg, #df4f91 0%, #b03775 100%); --bevel-button-magenta-shadow: 0 20px 36px rgba(196, 26, 100, .52), 0 8px 16px rgba(154, 16, 78, .42), 0 0 0 1px rgba(255, 144, 203, .62), inset 0 0 0 1px rgba(255, 200, 224, .42), inset 0 0 0 2px rgba(255, 200, 224, .56), inset 0 1px 0 1px rgba(255, 245, 252, .92), inset 0 -1px 0 1px rgba(60, 8, 30, .82); --bevel-button-magenta-border: 0; /* button-jewel — flat magenta canvas + 3D GOLD frame ring + halo */ --bevel-button-jewel-bg: linear-gradient(180deg, #ff5fa8 0%, #d71879 100%); --bevel-button-jewel-shadow: 0 22px 40px rgba(216, 24, 121, .52), 0 0 32px rgba(255, 184, 92, .42), /* GOLD halo */ 0 8px 16px rgba(196, 26, 100, .36), 0 0 0 1px rgba(255, 224, 107, .68), /* GOLD frame ring (3D tube) */ inset 0 0 0 2px rgba(255, 213, 74, .82), inset 0 1px 0 1px rgba(255, 240, 180, .96), /* TOP gold brilliant */ inset 0 -1px 0 1px rgba(150, 80, 20, .82); /* BOTTOM gold dark */ --bevel-button-jewel-border: 0; /* ============================================================ TIER 4 — SECONDARY/THIN BUTTON BEVELS Less volume, more transparent — for non-primary actions ============================================================ */ /* button-thin — inspired by 20 Thin mobile UI low-normal, subtle gradient, low specular */ --bevel-button-thin-bg: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 232, 244, .82) 100%); --bevel-button-thin-shadow: 0 6px 14px rgba(196, 50, 126, .14), 0 1px 3px rgba(46, 14, 32, .08), inset 0 1px 0 rgba(255, 255, 255, .92), inset 0 -1px 0 rgba(216, 24, 121, .12); --bevel-button-thin-border: 1px solid rgba(141, 39, 95, .22); /* button-clean — inspired by 47 Button-like card mid-normal, low specular, fast read */ --bevel-button-clean-bg: linear-gradient(165deg, rgba(255, 255, 255, .96) 0%, rgba(255, 232, 244, .92) 100%); --bevel-button-clean-shadow: 0 8px 18px rgba(196, 50, 126, .18), 0 2px 5px rgba(46, 14, 32, .1), 0 0 0 1px rgba(255, 200, 224, .42), inset 0 1px 0 rgba(255, 255, 255, .92); --bevel-button-clean-border: 1px solid rgba(255, 200, 224, .62); /* button-ghost — outline-only style for tertiary actions transparent fill, only border + subtle shadow */ --bevel-button-ghost-bg: transparent; --bevel-button-ghost-shadow: inset 0 0 0 1px rgba(216, 24, 121, .42), 0 1px 2px rgba(46, 14, 32, .04); --bevel-button-ghost-border: 0; /* ============================================================ TIER 5 — CHIP/CELL BEVELS Minimal volume — for utility chips, list cells, options ============================================================ */ /* chip-clean — inspired by 49 Clean bevel very thin, gentle pearl rim */ --bevel-chip-clean-bg: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 245, 250, .88) 100%); --bevel-chip-clean-shadow: 0 4px 10px rgba(196, 50, 126, .12), 0 1px 2px rgba(46, 14, 32, .06), inset 0 1px 0 rgba(255, 255, 255, .92); --bevel-chip-clean-border: 1px solid rgba(255, 200, 224, .42); /* chip-flat — inspired by 31 Minimal clean (flatter) near-flat with subtle rim only */ --bevel-chip-flat-bg: rgba(255, 255, 255, .82); --bevel-chip-flat-shadow: inset 0 0 0 1px rgba(216, 24, 121, .14); --bevel-chip-flat-border: 0; /* ============================================================ TIER 6 — ACTIVE/SELECTED STATE BEVELS Intense visual highlight for selected items ============================================================ */ /* state-jewel-active — inspired by 30 Jewel rose applied to selected level / chosen answer / pressed tab */ --bevel-state-jewel-active-bg: radial-gradient(ellipse 80% 40% at 50% 8%, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, var(--plum-800, #401833) 0%, var(--rose-600, #e8298f) 100%); --bevel-state-jewel-active-shadow: 0 14px 28px rgba(196, 26, 100, .48), 0 0 22px rgba(255, 184, 92, .36), 0 0 0 2px rgba(255, 224, 107, .58), inset 0 2px 0 rgba(255, 255, 255, .58), inset 0 -2px 6px rgba(116, 12, 60, .42); --bevel-state-jewel-active-border: 0; /* state-pressed — inset-shadow pressed look applied via :active or [data-pressed="true"] */ --bevel-state-pressed-bg: linear-gradient(180deg, rgba(255, 232, 244, .82) 0%, rgba(255, 255, 255, .68) 100%); --bevel-state-pressed-shadow: 0 1px 2px rgba(46, 14, 32, .08), inset 0 2px 4px rgba(116, 12, 60, .26), inset 0 -1px 0 rgba(255, 255, 255, .42); --bevel-state-pressed-border: 1px solid rgba(141, 39, 95, .26); /* state-disabled — desaturated dim look */ --bevel-state-disabled-bg: rgba(255, 245, 250, .42); --bevel-state-disabled-shadow: inset 0 0 0 1px rgba(141, 39, 95, .12); --bevel-state-disabled-border: 0; /* ============================================================ TIER 7 — SUB-FRAME BEVELS (nested inner elements) Inner pearl/rim treatments for icons, avatars, holders ============================================================ */ /* sub-pearl — inspired by 22 Inner white line soft inner pearl finish — for icon holders inside cards */ --bevel-sub-pearl-bg: radial-gradient(ellipse 70% 40% at 50% 14%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(165deg, #fff8ed 0%, #fff5fa 100%); --bevel-sub-pearl-shadow: 0 4px 10px rgba(196, 50, 126, .14), 0 1px 3px rgba(46, 14, 32, .08), 0 0 0 1px rgba(255, 200, 224, .58), inset 0 1px 0 rgba(255, 255, 255, .92); --bevel-sub-pearl-border: 0; /* sub-rim — inspired by 15 White rim rose emphasised white outer rim for high-contrast holders */ --bevel-sub-rim-bg: linear-gradient(165deg, #fffaf4 0%, #fff5fa 100%); --bevel-sub-rim-shadow: 0 4px 10px rgba(196, 50, 126, .12), 0 0 0 2px rgba(255, 255, 255, .96), 0 0 0 3px rgba(255, 200, 224, .42), inset 0 1px 0 rgba(255, 255, 255, .92); --bevel-sub-rim-border: 0; /* sub-flat — minimal nesting indicator (just inset border) */ --bevel-sub-flat-bg: rgba(255, 255, 255, .68); --bevel-sub-flat-shadow: inset 0 0 0 1px rgba(255, 200, 224, .58), inset 0 1px 0 rgba(255, 255, 255, .92); --bevel-sub-flat-border: 0; /* ============================================================ TIER 8 — PICTURE-FRAME BEVELS Wide multi-band frames for chess board / hero showcases. The illusion of an engraved museum-quality frame is achieved via stacked inset shadows where each layer is one pixel wider than the previous — so the rendering composes 6+ concentric rings of alternating pearl / gold / plum hairlines. Layer-spread cheat-sheet (inset 0 0 0 N): N=1 outermost edge (1px hairline) N=2-3 thin highlight stripe N=3-5 decorative band N=5-7 wide pearl plate N=7-9 inner recessed shadow N=9+ actual content area ============================================================ */ /* frame-board-luxe — flat board canvas + heavy 3D frame. The board (chess squares) inside is the painting; the wide multi-band frame around is the ornate baguette molding. */ --bevel-frame-board-luxe-bg: /* Mostly flat ivory canvas — the playing surface */ linear-gradient(180deg, #fffaf4 0%, #fff2e8 100%); --bevel-frame-board-luxe-shadow: /* outer ambient drop */ 0 36px 72px rgba(46, 14, 32, .42), 0 16px 32px rgba(116, 18, 70, .28), 0 0 0 1px rgba(255, 255, 255, .92), /* === MULTI-BAND ENGRAVED FRAME (9-stripe with per-ring tube) === */ inset 0 0 0 1px rgba(116, 18, 70, .56), inset 0 0 0 2px rgba(216, 24, 121, .32), inset 0 0 0 4px rgba(255, 255, 255, .96), /* GOLD signature tube (4-5px) — strongest 3D ring */ inset 0 0 0 5px rgba(255, 184, 92, .82), inset 0 1px 0 4px rgba(255, 232, 168, 1), /* gold TOP brilliant */ inset 0 2px 0 3px rgba(255, 248, 220, .68), /* gold TOP soft falloff */ inset 0 -1px 0 4px rgba(150, 80, 20, .82), /* gold BOTTOM dark */ inset 0 -2px 0 3px rgba(120, 60, 10, .56), /* gold BOTTOM deep */ /* Pearl plate (5-7px wide tube) */ inset 0 0 0 7px rgba(255, 250, 244, 1), inset 0 1px 0 6px rgba(255, 255, 255, 1), inset 0 -1px 0 6px rgba(180, 120, 90, .58), /* Pearl base outer ring (7-8px) */ inset 0 0 0 8px rgba(255, 245, 232, .96), inset 0 -1px 0 7px rgba(196, 140, 100, .42), /* Inner pink recess (8-9px) — board groove */ inset 0 0 0 9px rgba(216, 24, 121, .22), inset 0 1px 0 8px rgba(255, 144, 180, .42), inset 0 -1px 0 8px rgba(80, 12, 40, .68); --bevel-frame-board-luxe-border: 0; /* frame-hero-luxe — compact flat canvas + 3D frame (7-stripe) */ --bevel-frame-hero-luxe-bg: linear-gradient(180deg, #fffaf4 0%, #fff2f8 100%); --bevel-frame-hero-luxe-shadow: 0 30px 64px rgba(46, 14, 32, .36), 0 12px 24px rgba(116, 18, 70, .26), 0 0 0 1px rgba(255, 255, 255, .92), /* multi-band frame stripes with per-ring tube shading */ inset 0 0 0 1px rgba(116, 18, 70, .42), inset 0 0 0 3px rgba(255, 255, 255, .96), /* Gold tube (3-4px) */ inset 0 0 0 4px rgba(255, 184, 92, .68), inset 0 1px 0 3px rgba(255, 232, 168, .92), inset 0 -1px 0 3px rgba(160, 90, 30, .68), /* Pearl plate (4-6px) */ inset 0 0 0 6px rgba(255, 245, 232, .98), inset 0 1px 0 5px rgba(255, 255, 255, 1), inset 0 -1px 0 5px rgba(180, 120, 90, .42), /* Inner recess (6-7px) */ inset 0 0 0 7px rgba(216, 24, 121, .14), inset 0 -1px 0 6px rgba(80, 12, 40, .42); --bevel-frame-hero-luxe-border: 0; } /* ============================================================ APPLICATION RULES — apply preset by [data-bevel] attribute ============================================================ */ /* TIER 1 — Hero */ [data-bevel="hero-candy"] { background: var(--bevel-hero-candy-bg); box-shadow: var(--bevel-hero-candy-shadow); border: var(--bevel-hero-candy-border); } [data-bevel="hero-premium"] { background: var(--bevel-hero-premium-bg); box-shadow: var(--bevel-hero-premium-shadow); border: var(--bevel-hero-premium-border); } [data-bevel="hero-jewel"] { background: var(--bevel-hero-jewel-bg); box-shadow: var(--bevel-hero-jewel-shadow); border: var(--bevel-hero-jewel-border); } [data-bevel="hero-deep"] { background: var(--bevel-hero-deep-bg); box-shadow: var(--bevel-hero-deep-shadow); border: var(--bevel-hero-deep-border); } /* TIER 2 — Cards */ [data-bevel="card-production"] { background: var(--bevel-card-production-bg); box-shadow: var(--bevel-card-production-shadow); border: var(--bevel-card-production-border); } [data-bevel="card-pearl"] { background: var(--bevel-card-pearl-bg); box-shadow: var(--bevel-card-pearl-shadow); border: var(--bevel-card-pearl-border); } [data-bevel="card-toy"] { background: var(--bevel-card-toy-bg); box-shadow: var(--bevel-card-toy-shadow); border: var(--bevel-card-toy-border); } [data-bevel="card-clean"] { background: var(--bevel-card-clean-bg); box-shadow: var(--bevel-card-clean-shadow); border: var(--bevel-card-clean-border); } /* TIER 3 — Primary buttons */ [data-bevel="button-bold"] { background: var(--bevel-button-bold-bg); box-shadow: var(--bevel-button-bold-shadow); border: var(--bevel-button-bold-border); color: #fff; } [data-bevel="button-magenta"] { background: var(--bevel-button-magenta-bg); box-shadow: var(--bevel-button-magenta-shadow); border: var(--bevel-button-magenta-border); color: #fff; } [data-bevel="button-jewel"] { background: var(--bevel-button-jewel-bg); box-shadow: var(--bevel-button-jewel-shadow); border: var(--bevel-button-jewel-border); color: #fff; } /* TIER 4 — Secondary buttons */ [data-bevel="button-thin"] { background: var(--bevel-button-thin-bg); box-shadow: var(--bevel-button-thin-shadow); border: var(--bevel-button-thin-border); } [data-bevel="button-clean"] { background: var(--bevel-button-clean-bg); box-shadow: var(--bevel-button-clean-shadow); border: var(--bevel-button-clean-border); } [data-bevel="button-ghost"] { background: var(--bevel-button-ghost-bg); box-shadow: var(--bevel-button-ghost-shadow); border: var(--bevel-button-ghost-border); } /* TIER 5 — Chips */ [data-bevel="chip-clean"] { background: var(--bevel-chip-clean-bg); box-shadow: var(--bevel-chip-clean-shadow); border: var(--bevel-chip-clean-border); } [data-bevel="chip-flat"] { background: var(--bevel-chip-flat-bg); box-shadow: var(--bevel-chip-flat-shadow); border: var(--bevel-chip-flat-border); } /* TIER 6 — States */ [data-bevel="state-jewel-active"] { background: var(--bevel-state-jewel-active-bg); box-shadow: var(--bevel-state-jewel-active-shadow); border: var(--bevel-state-jewel-active-border); color: #fff; } [data-bevel="state-pressed"] { background: var(--bevel-state-pressed-bg); box-shadow: var(--bevel-state-pressed-shadow); border: var(--bevel-state-pressed-border); } [data-bevel="state-disabled"] { background: var(--bevel-state-disabled-bg); box-shadow: var(--bevel-state-disabled-shadow); border: var(--bevel-state-disabled-border); opacity: .6; cursor: not-allowed; } /* TIER 7 — Sub-frames */ [data-bevel="sub-pearl"] { background: var(--bevel-sub-pearl-bg); box-shadow: var(--bevel-sub-pearl-shadow); border: var(--bevel-sub-pearl-border); } [data-bevel="sub-rim"] { background: var(--bevel-sub-rim-bg); box-shadow: var(--bevel-sub-rim-shadow); border: var(--bevel-sub-rim-border); } [data-bevel="sub-flat"] { background: var(--bevel-sub-flat-bg); box-shadow: var(--bevel-sub-flat-shadow); border: var(--bevel-sub-flat-border); } /* TIER 8 — Picture-frames (multi-band fine-jewelry frame) */ [data-bevel="frame-board-luxe"] { background: var(--bevel-frame-board-luxe-bg); box-shadow: var(--bevel-frame-board-luxe-shadow); border: var(--bevel-frame-board-luxe-border); } [data-bevel="frame-hero-luxe"] { background: var(--bevel-frame-hero-luxe-bg); box-shadow: var(--bevel-frame-hero-luxe-shadow); border: var(--bevel-frame-hero-luxe-border); } /* ============================================================ SVG-FILTER NORMAL-MAP LAYER (opt-in via data-bevel-3d) The SVG filters defined inline at the top of chess.html / bevel-sandbox.html compute per-pixel surface normals from the blurred SourceAlpha, then run feSpecularLighting on the result. This is the closest CSS gets to actual normal-map shading — it samples implicit height from rounded corners + inset shadows and reflects a virtual light source per pixel. Apply via data-bevel-3d="" alongside data-bevel:
============================================================ */ [data-bevel-3d="soft"] { filter: url(#bevel-specular-soft); } [data-bevel-3d="strong"] { filter: url(#bevel-specular-strong); } [data-bevel-3d="engraved"] { filter: url(#bevel-frame-engraved); } /* ============================================================ COMPONENT-CONDITIONAL BEVEL OVERRIDES Promote chip → state-jewel-active when [aria-pressed="true"] or [data-active="true"] / [data-result="right"]. Higher specificity so it wins over the base [data-bevel="chip-clean"] rule. ============================================================ */ .chess-start-levels button[data-bevel][aria-pressed="true"], .chess-start-levels button[data-bevel][data-active="true"] { background: var(--bevel-state-jewel-active-bg); box-shadow: var(--bevel-state-jewel-active-shadow); border: var(--bevel-state-jewel-active-border); color: #fff; } .chess-puzzle-options button[data-bevel][data-result="right"] { background: linear-gradient(135deg, rgba(220, 250, 230, .95), rgba(190, 240, 215, .9)); box-shadow: 0 8px 18px rgba(60, 170, 100, .42), 0 0 0 2px rgba(60, 170, 100, .56), inset 0 2px 0 rgba(255, 255, 255, .82), inset 0 -2px 6px rgba(28, 100, 60, .26); border: 0; } .chess-puzzle-options button[data-bevel][data-result="wrong"] { background: linear-gradient(135deg, rgba(255, 220, 225, .95), rgba(255, 200, 210, .9)); box-shadow: 0 8px 18px rgba(220, 80, 100, .42), 0 0 0 2px rgba(220, 80, 100, .56), inset 0 2px 0 rgba(255, 255, 255, .56), inset 0 -2px 6px rgba(160, 28, 60, .26); border: 0; } .chess-bottom-sheet-tabs button[data-bevel][aria-pressed="true"] { background: var(--bevel-state-jewel-active-bg); box-shadow: var(--bevel-state-jewel-active-shadow); border: var(--bevel-state-jewel-active-border); color: #fff; } /* ============================================================ RESULT-OVERLAY BEVEL OVERRIDES When result-overlay shows, swap the bevel based on result-kind. ============================================================ */ .chess-result-overlay[data-result-kind="goose"] .chess-result-card[data-bevel] { background: var(--bevel-hero-jewel-bg); box-shadow: var(--bevel-hero-jewel-shadow); border: var(--bevel-hero-jewel-border); } .chess-result-overlay[data-result-kind="cat"] .chess-result-card[data-bevel] { background: var(--bevel-hero-deep-bg); box-shadow: var(--bevel-hero-deep-shadow); border: var(--bevel-hero-deep-border); } .chess-result-overlay[data-result-kind="draw"] .chess-result-card[data-bevel] { background: var(--bevel-hero-premium-bg); box-shadow: var(--bevel-hero-premium-shadow); border: var(--bevel-hero-premium-border); } /* ============================================================ STATE LAYERING — interactive overlays on top of any preset Used by attaching data-bevel-state="hover|pressed" alongside the base data-bevel. Allows state to compose with any preset. ============================================================ */ [data-bevel][data-bevel-state="hover"]:hover, [data-bevel][data-bevel-state="hover"]:focus-visible { transform: translateY(-2px); filter: brightness(1.04) saturate(1.06); transition: transform .18s ease, filter .18s ease; } [data-bevel][data-bevel-state="pressed"]:active, [data-bevel][data-bevel-state="auto"]:active { transform: scale(.97) translateY(0); transition: transform .12s ease; } /* Reduced-motion fallback */ @media (prefers-reduced-motion: reduce) { [data-bevel][data-bevel-state] { transition: none; } [data-bevel][data-bevel-state]:hover, [data-bevel][data-bevel-state]:active { transform: none; } }