/* ========================================================================= Iori · Effects — radii, shadows, borders, texture Soft & pillowy: large radii (capsule buttons), big diffuse low-opacity shadows, a faint paper grain, and two whisper-quiet color glows. ========================================================================= */ :root { /* ---- Corner radii (soft, pillowy) ---- */ --radius-sm: 12px; /* inputs, small chips */ --radius-md: 14px; /* buttons (capsule-ish), inputs */ --radius-lg: 18px; /* small cards */ --radius-xl: 24px; /* cards */ --radius-2xl: 26px; /* large cards / panels */ --radius-full: 9999px;/* pills, fully-rounded buttons, avatars */ /* ---- Shadows — large, soft, low-opacity, warm-tinted ---- */ --shadow-soft: 0 30px 60px -40px rgba(51, 48, 42, 0.50); /* hero cards, FAB */ --shadow-soft2: 0 10px 30px -18px rgba(51, 48, 42, 0.45); /* buttons, raised */ --shadow-chip: 0 8px 24px -14px rgba(51, 48, 42, 0.35); /* chips, swatches, selected */ /* ---- Borders ---- */ --border-hair: 1px solid var(--line); --border-strong: 1px solid var(--border-strong); /* ---- Card gradient (tile → tile-2) ---- */ --gradient-card: linear-gradient(170deg, var(--tile), var(--tile-2)); /* @kind other */ --gradient-soft: linear-gradient(to bottom right, rgba(255,255,255,0.80), rgba(237,228,210,0.40)); /* @kind other */ /* ---- Paper texture + ambient glows (apply as a fixed ::before layer) ---- */ /* ---- Paper texture + ambient glows (apply as a fixed ::before layer) ---- */ --paper-glows: radial-gradient(circle at 16% 10%, rgba(201,154,126,0.10), transparent 42%), radial-gradient(circle at 86% 86%, rgba(139,154,120,0.10), transparent 44%); /* @kind other */ --paper-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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); /* @kind other */ } /* Drop-in page texture. Add class `iori-paper` to (or a full-bleed wrapper) to get the signature warm paper + soft glows behind content. */ .iori-paper { background-color: var(--oat); position: relative; } .iori-paper::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--paper-glows), var(--paper-grain); } .iori-paper > * { position: relative; z-index: 1; }