/* ── Material language ─────────────────────────────────────────────────── Six materials. Compose with radius + shadow tokens; never invent a new surface treatment in product code. 01 paper .iv-paper warm sheet, grain, inner highlight 02 colour .iv-paper- pastel stationery sheet 03 glass .iv-glass translucent + blur, thin bright border 04 photo .iv-photo printed photograph, physical shadow 05 card .iv-card the workhorse surface 06 book .iv-notebook layered page stack with edge detail ──────────────────────────────────────────────────────────────────────── */ :root{ --texture-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); /* @kind other */ --texture-dots:radial-gradient(rgb(var(--shadow-ink) / .13) 1px,transparent 1.1px); /* @kind other */ --texture-dots-size:18px 18px; /* @kind spacing */ --texture-grid:linear-gradient(rgb(var(--shadow-ink) / .07) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--shadow-ink) / .07) 1px,transparent 1px); /* @kind other */ --texture-grid-size:26px 26px; /* @kind spacing */ --texture-rule:repeating-linear-gradient(to bottom,transparent,transparent 30px,rgb(var(--shadow-ink) / .08) 30px,rgb(var(--shadow-ink) / .08) 31px); /* @kind other */ --blur-glass:18px; /* @kind spacing */ --blur-glass-strong:28px; /* @kind spacing */ } /* grain overlay, shared by paper materials. .iv-grain forces position:relative;z-index:2 onto every direct child, so it suits a card with flow content — NOT a container whose children carry their own stacking order (a desktop, a canvas, anything with absolute layers). There, paint grain as an explicit pointer-events:none layer; see components/desktop/Wallpaper.jsx. */ .iv-grain{position:relative;isolation:isolate} .iv-grain::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background-image:var(--texture-grain);background-size:160px 160px;opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);z-index:1} .iv-grain>*{position:relative;z-index:2} /* 01 Paper */ .iv-paper{background:var(--surface-paper);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-sheet);box-shadow:var(--highlight-soft),var(--shadow-sm)} /* 02 Soft colour paper */ .iv-paper-sky{background:var(--paper-sky);color:var(--ink-sky)} .iv-paper-lavender{background:var(--paper-lavender);color:var(--ink-lavender)} /* mounted sheet — saturated frame around a paper interior */ .iv-mount{padding:9px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)} .iv-mount>*{background:var(--surface-paper);border-radius:var(--radius-md);box-shadow:var(--shadow-inset-hairline)} .iv-paper-butter{background:var(--paper-butter);color:var(--ink-butter)} .iv-paper-peach{background:var(--paper-peach);color:var(--ink-peach)} .iv-paper-sage{background:var(--paper-sage);color:var(--ink-sage)} .iv-paper-coral{background:var(--paper-coral);color:var(--ink-coral)} .iv-paper-cream{background:var(--paper-cream);color:var(--ink-cream)} .iv-paper-sky,.iv-paper-lavender,.iv-paper-butter,.iv-paper-peach,.iv-paper-sage,.iv-paper-coral,.iv-paper-cream{border:var(--border-width) solid rgb(var(--shadow-ink) / .06);border-radius:var(--radius-card);box-shadow:var(--highlight-soft),var(--shadow-xs)} /* 03 Glass */ .iv-glass{background:var(--surface-glass);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.5);backdrop-filter:blur(var(--blur-glass)) saturate(1.5);border:var(--border-width) solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)} .iv-glass-strong{background:var(--surface-glass-strong);-webkit-backdrop-filter:blur(var(--blur-glass-strong)) saturate(1.6);backdrop-filter:blur(var(--blur-glass-strong)) saturate(1.6);border:var(--border-width) solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)} /* 04 Photograph */ .iv-photo{display:block;border-radius:var(--radius-photo);background:var(--warm-200);box-shadow:var(--shadow-photo);overflow:hidden;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)} .iv-photo img{display:block;width:100%;height:100%;object-fit:cover} .iv-photo-tilt{transform:rotate(-1.4deg)} .iv-photo-tilt-alt{transform:rotate(1.1deg)} /* 05 Card */ .iv-card{background:var(--surface-card);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-card);box-shadow:var(--highlight-soft),var(--shadow-sm)} .iv-card-interactive{transition:var(--t-tactile);cursor:pointer} .iv-card-interactive:hover{transform:translateY(var(--lift-hover));box-shadow:var(--highlight-soft),var(--shadow-md)} .iv-card-interactive:active{transform:translateY(var(--lift-press));box-shadow:var(--shadow-xs)} /* 06 Notebook — layered page stack */ .iv-notebook{position:relative;background:var(--surface-paper);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-sheet);box-shadow:var(--highlight-soft),var(--shadow-md)} .iv-notebook::before,.iv-notebook::after{content:"";position:absolute;left:10px;right:10px;bottom:-6px;height:14px;border:var(--border-width) solid var(--border-hairline);border-top:none;border-radius:0 0 var(--radius-sheet) var(--radius-sheet);background:var(--surface-paper);z-index:-1} .iv-notebook::after{left:18px;right:18px;bottom:-11px;background:var(--surface-sunken)} /* running-timer pulse — the one ambient animation in the product */ @keyframes iv-pulse{0%,100%{opacity:1}50%{opacity:.35}} .iv-pulse{animation:iv-pulse 2s var(--ease-standard) infinite} /* decorative accents — sparing */ .iv-tape{position:absolute;width:86px;height:24px;background:rgb(var(--highlight-ink) / .55);border-left:1px solid rgb(var(--shadow-ink) / .07);border-right:1px solid rgb(var(--shadow-ink) / .07);box-shadow:0 1px 2px rgb(var(--shadow-ink) / .08);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:.85} .iv-torn-bottom{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0h200v13c-12 3-19-1-30 1s-16 4-27 2-14-4-25-2-18 4-29 2-16-4-27-2-19 3-32-1z' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0h200v13c-12 3-19-1-30 1s-16 4-27 2-14-4-25-2-18 4-29 2-16-4-27-2-19 3-32-1z' fill='%23000'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .iv-ruled{background-image:var(--texture-rule);background-position:0 4px} .iv-dotted{background-image:var(--texture-dots);background-size:var(--texture-dots-size)} .iv-gridpaper{background-image:var(--texture-grid);background-size:var(--texture-grid-size)}