/* ============================================================ Inkgility Calculator — shared CSS Used by every standalone calculator page in /calculators/. Inherits the Inkgility editorial system (Instrument Serif headings, DM Sans body, Space Mono labels, purple→blue gradient accents). ============================================================ */ /* ─── Global rules — only apply on .ink-standalone pages ────────────── Standalone calculator pages (in /calculators/) add class="ink-standalone" to ; their body IS the calculator. Host pages (product-detail, gold-metallic-finish-business-cards, upload-design-gold-foil, custom-design-service-gold-foil) embed the calculator inside their own layout and do NOT add that class — so these resets don't nuke their page chrome. */ .ink-standalone *, .ink-standalone *::before, .ink-standalone *::after{box-sizing:border-box;margin:0;padding:0} .ink-standalone a{text-decoration:none;color:inherit} /* All ink-* descendants get safe box-sizing without margin/padding zeroing so engine elements size correctly when embedded. */ #ink-calc,#ink-calc *,#ink-calc *::before,#ink-calc *::after{box-sizing:border-box} .ink-standalone:root,html.ink-standalone{ --dark:#F3EBEF; --dark2:#FFFFFF; --cream:#1A0F2A; --purple:#8E21CA; --blue:#254AAD; --gold:#C58BEB; --muted:rgba(26,15,42,0.55); --border:rgba(26,15,42,0.10); --bg-warm:#FAF5F8; --text-heading:#1A0F2A; --text-body:#3D2D52; --text-caption:#6B5A7A; --btn-gradient:linear-gradient(129deg,#9B3FD4,#3A5BC7); --shadow-card:0 4px 18px rgba(142,33,202,.10); --shadow-hover:0 14px 36px -12px rgba(142,33,202,.22); } .ink-standalone[data-theme="dark"]{ --dark:#0A0810; --dark2:#120D1C; --cream:#F3EBEF; --muted:rgba(243,235,239,0.62); --border:rgba(243,235,239,0.10); --bg-warm:#0E0A18; --text-heading:#F3EBEF; --text-body:#D4CDE8; --text-caption:#A090C0; --shadow-card:0 4px 18px rgba(0,0,0,.18); } .ink-standalone body{ background:var(--dark); color:var(--text-body); font-family:'DM Sans',sans-serif; min-height:100vh; padding:32px; } /* ── Page header ── */ .ink-page-head{max-width:1180px;margin:0 auto 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px} .ink-page-head h1{font-family:'Instrument Serif',serif;font-size:32px;font-weight:400;letter-spacing:-.02em;color:var(--text-heading)} .ink-page-head h1 em{font-style:italic;background:var(--btn-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .ink-page-meta{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--text-caption)} .ink-page-meta a{color:var(--purple);border-bottom:1px dashed rgba(142,33,202,.30);padding-bottom:1px} /* ── Calculator grid ── */ .ink-calc-wrap{ max-width:1180px;margin:0 auto; display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start; } .ink-calc-left{display:flex;flex-direction:column;gap:10px} .ink-block{padding:14px 0;border-bottom:1px solid var(--border)} .ink-block:first-child{padding-top:0} .ink-block-lbl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);font-weight:700;margin-bottom:10px} /* Currency switcher */ .ink-currency{display:inline-flex;gap:3px;padding:3px;background:var(--bg-warm);border-radius:7px} .ink-cur{padding:6px 11px;border:none;background:transparent;font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--text-caption);cursor:pointer;border-radius:5px;transition:.15s} .ink-cur:hover{color:var(--purple)} .ink-cur.on{background:var(--purple);color:#fff} /* Required-field asterisk */ .ink-req{color:var(--purple);font-weight:700;margin-right:2px} /* Quantity cards — qty on top, per-tier price below */ .ink-qty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .ink-qty{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; padding:18px 10px; border:1px solid var(--border);border-radius:10px; background:var(--dark2);color:var(--text-body); font-family:'DM Sans',sans-serif;cursor:pointer;transition:.15s; } .ink-qty:hover{border-color:rgba(142,33,202,.40)} .ink-qty.on{border-color:var(--purple);background:rgba(142,33,202,.08)} .ink-qty-num{font-family:'Instrument Serif',serif;font-size:28px;font-weight:400;letter-spacing:-.01em;color:var(--text-heading);line-height:1} .ink-qty.on .ink-qty-num{color:var(--purple)} .ink-qty-price{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--text-caption);font-weight:500} .ink-qty.on .ink-qty-price{color:var(--purple)} @media(max-width:760px){.ink-qty-grid{grid-template-columns:repeat(2,1fr)}} /* Sets section — +/- counter on the left, summary + helper on the right */ .ink-sets-row{display:flex;gap:14px;align-items:flex-start} .ink-sets-counter{ display:inline-flex;align-items:stretch;flex-shrink:0; border:1px solid var(--border);border-radius:8px;overflow:hidden; background:var(--dark2); } .ink-sets-btn{ width:36px;height:42px;border:none;background:transparent; color:var(--text-body);font-size:18px;font-weight:500;cursor:pointer; font-family:'DM Sans',sans-serif;transition:.15s; } .ink-sets-btn:hover{background:rgba(142,33,202,.08);color:var(--purple)} .ink-sets-input{ width:60px;height:42px;border:none; border-left:1px solid var(--border);border-right:1px solid var(--border); background:transparent;text-align:center;outline:none; font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--text-heading); -moz-appearance:textfield; } .ink-sets-input::-webkit-outer-spin-button, .ink-sets-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .ink-sets-info{flex:1;min-width:0;padding-top:2px} .ink-sets-summary{ font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em; color:var(--purple);font-weight:700;text-transform:uppercase;margin-bottom:4px; } .ink-sets-help{font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--text-body);line-height:1.5} /* Smaller stepper used inside each address block for per-address sets count */ .ink-sets-counter-sm .ink-sets-btn{width:30px;height:34px;font-size:16px} .ink-sets-counter-sm .ink-sets-input{width:46px;height:34px;font-size:13px} /* Per-address sets row inside the address form / summary */ .ink-addr-sets-row{display:flex;align-items:center;gap:10px;padding:10px 0 14px;border-bottom:1px dashed var(--border);margin-bottom:12px;flex-wrap:wrap} .ink-addr-sets-lbl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-caption);font-weight:700;flex-shrink:0} .ink-addr-sets-of{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--text-caption);font-weight:500} /* Accordion */ .ink-acc{border:1px solid var(--border);border-radius:9px;background:var(--dark2);overflow:hidden;transition:border-color .15s} .ink-acc[open]{border-color:rgba(142,33,202,.30)} .ink-acc summary{padding:11px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;list-style:none;transition:background .15s} .ink-acc summary::-webkit-details-marker{display:none} .ink-acc summary:hover{background:rgba(142,33,202,.04)} .ink-acc-title{font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:600;color:var(--text-heading);flex:1} .ink-acc-badge{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--purple);background:rgba(142,33,202,.10);padding:3px 9px;border-radius:30px;font-weight:700;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ink-acc-body{padding:10px 14px 14px;border-top:1px dashed var(--border)} /* All selections render as cards: swatch on top, label + sub centered below, price meta as a small chip at the bottom. Consistent across every accordion. */ .ink-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px} /* Center small pickers — when a section has exactly 1, 2, or 3 options, hardcode the column count and center the row so the cards don't sit stranded on the left of a wide grid. Uses :has() to detect the exact child count (item 1, 2, OR 3 is also the LAST child). Modern browsers only — falls back to the default 1fr behavior on older browsers. */ .ink-opts:has(> .ink-opt:nth-child(1):last-child){ grid-template-columns:minmax(140px, 260px); justify-content:center; } .ink-opts:has(> .ink-opt:nth-child(2):last-child){ grid-template-columns:repeat(2, minmax(140px, 220px)); justify-content:center; } .ink-opts:has(> .ink-opt:nth-child(3):last-child){ grid-template-columns:repeat(3, minmax(140px, 220px)); justify-content:center; } .ink-opt{ padding:12px 10px 10px; border:1px solid var(--border);border-radius:8px; background:var(--bg-warm); cursor:pointer;font-family:'DM Sans',sans-serif;transition:.15s; display:flex;flex-direction:column;align-items:center; text-align:center;gap:6px; position:relative; } .ink-opt:hover{border-color:rgba(142,33,202,.40)} .ink-opt.on{border-color:var(--purple);background:rgba(142,33,202,.10)} /* Swatch sits centered above the text */ .ink-opt > .ink-sw{margin:0 auto 2px;flex-shrink:0} /* Text column: full width, centered, label + sub stacked */ .ink-opt-text{flex:0 0 auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:3px} /* Labels and sub-lines wrap freely — never truncate with an ellipsis. The option tile grows vertically as needed so customers always see the full description. white-space:pre-line preserves explicit \n in subs while still allowing soft wraps on long lines. */ .ink-opt-lbl{display:block;width:100%;font-size:13px;color:var(--text-heading);font-weight:600;text-align:center;white-space:normal;line-height:1.3;word-break:break-word;overflow-wrap:break-word} .ink-opt-sub{display:block;width:100%;font-family:'Space Mono',monospace;font-size:10px;color:var(--text-caption);font-weight:500;letter-spacing:.02em;line-height:1.4;text-align:center;white-space:pre-line;word-break:break-word;overflow-wrap:break-word} .ink-opt.on .ink-opt-sub{color:rgba(142,33,202,.80)} /* Price meta lives at the bottom of the card */ .ink-opt-meta{ font-family:'Space Mono',monospace;font-size:10px;color:var(--text-caption); font-weight:700;letter-spacing:.04em; margin-top:2px;padding:3px 9px; background:rgba(26,15,42,.05);border-radius:30px; } [data-theme="dark"] .ink-opt-meta{background:rgba(243,235,239,.06)} .ink-opt.on .ink-opt-meta{color:var(--purple);background:rgba(142,33,202,.10)} /* Per-section column widths */ .ink-acc[data-section="size"] .ink-opts{grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px} .ink-acc[data-section="foilTone"] .ink-opts, .ink-acc[data-section="raisedFoil"] .ink-opts{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px} /* Colored Core swatch — small card seen edge-on showing the layered construction: white outer / colored middle / white outer. Reads instantly as "this colored stripe shows on the cut edge of the card". */ /* Colored Seam Sandwich Cards — SVG composite hosted INSIDE the Edge Color section (data-section="edges") when state.edgeCoreType === 'core'. Target on the .ink-sw-core class itself (which only renders in this mode) so the styling fires regardless of where the section lives in the layout. When sandwich mode is active, the edges grid widens to give each big swatch room — the painted-edge swatches are smaller and centered in the wider cells, which still looks fine. */ .ink-acc[data-section="edges"] .ink-opts{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px; } .ink-opt > .ink-sw.ink-sw-core{ width:100%;height:110px;flex:0 0 110px; margin:0 auto 12px;border:none;background:transparent;box-shadow:none; display:flex;align-items:center;justify-content:center; overflow:hidden; } .ink-sw-core{display:flex;align-items:center;justify-content:center;width:100%;height:100%} .ink-sw-core-svg{ display:block; width:100%;height:100%;max-width:170px;max-height:96px; filter:drop-shadow(0 3px 5px rgba(58,43,95,.25)) drop-shadow(0 1px 2px rgba(58,43,95,.14)); } .ink-opt.on .ink-sw-core-svg{ filter:drop-shadow(0 4px 7px rgba(142,33,202,.32)) drop-shadow(0 1px 3px rgba(37,74,173,.18)); } /* Cork swatch — base color with scattered speckles (radial gradients) to evoke cork's characteristic granular surface. */ .ink-acc[data-section="corkColor"] .ink-opts{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px; } .ink-acc[data-section="corkColor"] .ink-opt > .ink-sw{ width:100%;height:54px;border-radius:4px;margin-bottom:4px; border:1px solid rgba(70,45,20,.40); overflow:hidden;position:relative; box-shadow:inset 0 -2px 4px rgba(0,0,0,.15); } .ink-sw-cork{display:block;width:100%;height:100%} .ink-sw-cork-card{display:block;width:100%;height:100%;position:relative} .ink-sw-cork-grain{ position:absolute;inset:0; background: radial-gradient(circle at 10% 20%, rgba(0,0,0,.22) 0 1.5px, transparent 2.5px), radial-gradient(circle at 30% 60%, rgba(0,0,0,.18) 0 1.5px, transparent 2.5px), radial-gradient(circle at 55% 25%, rgba(0,0,0,.20) 0 1.5px, transparent 2.5px), radial-gradient(circle at 75% 70%, rgba(0,0,0,.22) 0 1.5px, transparent 2.5px), radial-gradient(circle at 90% 35%, rgba(0,0,0,.18) 0 1.5px, transparent 2.5px), radial-gradient(circle at 20% 85%, rgba(0,0,0,.15) 0 1.5px, transparent 2.5px), radial-gradient(circle at 50% 90%, rgba(0,0,0,.18) 0 1.5px, transparent 2.5px), radial-gradient(circle at 80% 12%, rgba(0,0,0,.15) 0 1.5px, transparent 2.5px); pointer-events:none; } /* Leather swatch — landscape card with the base color, a soft organic grain (radial spots) and a subtle diagonal sheen so it reads as actual leather rather than a flat brown chip. */ .ink-acc[data-section="leatherColor"] .ink-opts{ grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:8px; } .ink-acc[data-section="leatherColor"] .ink-opt > .ink-sw{ width:100%;height:54px;border-radius:4px;margin-bottom:4px; border:1px solid rgba(58,43,95,.35); overflow:hidden;position:relative; box-shadow:inset 0 -3px 6px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.18); } .ink-sw-leather{display:block;width:100%;height:100%} .ink-sw-leather-card{display:block;width:100%;height:100%;position:relative} /* Pebble grain — scattered low-opacity radial spots evoke leather pores */ .ink-sw-leather-grain{ position:absolute;inset:0; background: radial-gradient(circle at 15% 25%, rgba(255,255,255,.10) 0, transparent 6%), radial-gradient(circle at 65% 35%, rgba(0,0,0,.12) 0, transparent 6%), radial-gradient(circle at 35% 65%, rgba(255,255,255,.08) 0, transparent 5%), radial-gradient(circle at 80% 70%, rgba(0,0,0,.10) 0, transparent 6%), radial-gradient(circle at 25% 85%, rgba(0,0,0,.08) 0, transparent 5%), radial-gradient(circle at 55% 15%, rgba(255,255,255,.08) 0, transparent 5%), radial-gradient(circle at 90% 50%, rgba(0,0,0,.10) 0, transparent 5%); pointer-events:none; } .ink-sw-leather-shine{ position:absolute;left:0;right:0;top:0;height:38%; background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,transparent 100%); pointer-events:none; } /* Acrylic picker — glassy chip with extra-strong reflective sheen so it reads as polished plexiglass rather than opaque plastic. Same chip layout as plastic, brighter highlight overlay. */ .ink-acc[data-section="acrylicColor"] .ink-opts{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px; } .ink-acc[data-section="acrylicColor"] .ink-opt > .ink-sw{ width:100%;height:50px;border-radius:3px;margin-bottom:4px; border:1px solid rgba(58,43,95,.30); overflow:hidden;position:relative; /* Sharper rim suggests a hard cut acrylic edge */ box-shadow:inset 0 -2px 5px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.40),inset 1px 0 0 rgba(255,255,255,.18); } .ink-sw-acrylic{display:block;width:100%;height:100%;position:relative} .ink-sw-acrylic-card{display:block;width:100%;height:100%;position:relative} .ink-sw-acrylic-gloss{ position:absolute;left:0;right:0;top:0;height:60%; background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.15) 60%,transparent 100%); pointer-events:none; } [data-theme="dark"] .ink-acc[data-section="acrylicColor"] .ink-opt > .ink-sw{ border-color:rgba(243,235,239,.25); } /* Wood picker — small landscape card with vertical grain lines overlaid so each wood type reads as actual wood, not just a brown chip. */ .ink-acc[data-section="woodColor"] .ink-opts{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px; } .ink-acc[data-section="woodColor"] .ink-opt > .ink-sw{ width:100%;height:54px;border-radius:3px;margin-bottom:4px; border:1px solid rgba(58,43,95,.35); overflow:hidden;position:relative; box-shadow:inset 0 -2px 4px rgba(0,0,0,.18); } .ink-sw-wood{display:block;width:100%;height:100%} .ink-sw-wood-card{display:block;width:100%;height:100%;position:relative} /* Grain — repeating vertical bands at low opacity. Variable widths via multiple linear-gradient layers give it an organic feel without needing a wood-photo texture. */ .ink-sw-wood-grain{ position:absolute;inset:0; background: repeating-linear-gradient(90deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 7px, rgba(0,0,0,.10) 7px, rgba(0,0,0,.10) 8px, rgba(0,0,0,0) 8px, rgba(0,0,0,0) 15px, rgba(255,255,255,.08) 15px, rgba(255,255,255,.08) 16px), repeating-linear-gradient(90deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 22px, rgba(0,0,0,.06) 22px, rgba(0,0,0,.06) 24px); pointer-events:none; } /* Plastic Color picker — same layout as paper, but each swatch reads as a shiny plastic card (glossy diagonal highlight, hard edges, slightly more reflective feel than the matte paper chips). */ .ink-acc[data-section="plasticColor"] .ink-opts{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px; } .ink-acc[data-section="plasticColor"] .ink-opt > .ink-sw{ width:100%;height:50px;border-radius:4px;margin-bottom:4px; border:1px solid rgba(58,43,95,.30); overflow:hidden;position:relative; /* Subtle rim shadow for a hard-edged plastic feel */ box-shadow:inset 0 -2px 4px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.25); } .ink-sw-plastic{display:block;width:100%;height:100%;position:relative} .ink-sw-plastic-card{display:block;width:100%;height:100%;position:relative} .ink-sw-plastic-gloss{ position:absolute;left:0;right:0;top:0;height:55%; background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.10) 60%,transparent 100%); pointer-events:none; } /* The Card + Key Tag Combo SVG sits inside the chip — strip the chip's own background tinting so the SVG card colors show cleanly. */ .ink-acc[data-section="plasticColor"] .ink-opt > .ink-sw-plastic-combo{ background:transparent; box-shadow:none; border:none; display:flex;align-items:center;justify-content:center; } [data-theme="dark"] .ink-acc[data-section="plasticColor"] .ink-opt > .ink-sw{ border-color:rgba(243,235,239,.22); } /* Paper Color picker — 56 options, denser tile grid so it doesn't dominate the page. Each tile shows the actual paper color as a full-width swatch above its label. */ .ink-acc[data-section="paperColor"] .ink-opts{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px; } .ink-acc[data-section="paperColor"] .ink-opt > .ink-sw{ width:100%;height:48px;border-radius:5px;margin-bottom:4px; border:1px solid rgba(58,43,95,.22); box-shadow:inset 0 -2px 4px rgba(0,0,0,.06); } [data-theme="dark"] .ink-acc[data-section="paperColor"] .ink-opt > .ink-sw{ border-color:rgba(243,235,239,.18); } /* Foil + finish swatches go full-width within their card so the texture/gradient reads */ .ink-acc[data-section="foilTone"] .ink-opt > .ink-sw, .ink-acc[data-section="raisedFoil"] .ink-opt > .ink-sw, .ink-acc[data-section="finish"] .ink-opt > .ink-sw{width:100%;height:60px;border-radius:6px;margin-bottom:4px} .ink-acc[data-section="foilTone"] .ink-sw-img, .ink-acc[data-section="raisedFoil"] .ink-sw-img{width:100%;height:60px} /* ────────────────────────────────────────────────────────── Raised foil 3D treatment — added to .ink-sw-img / .ink-sw-color when state.foilType === 'raised'. Same texture image, but the swatch reads as lifted off the card: • soft drop shadow under the swatch (cast on the card) • bright highlight along the top edge (specular lip) • slight upward translate so it visibly "pops" • subtle brightness/saturation bump (raised foil reads shinier) • ::after specular sweep — bright top-left fading to translucent bottom-right, the unmistakable "this is dimensional" cue Standard mode strips the class and the swatch returns to flat. ────────────────────────────────────────────────────────── */ .ink-foil-raised{ position:relative; box-shadow: 0 3px 6px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.18); transform:translateY(-1px); filter:brightness(1.08) saturate(1.06); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } .ink-foil-raised::after{ content:""; position:absolute;inset:0; pointer-events:none; border-radius:inherit; background:radial-gradient(ellipse at 22% 18%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 28%, rgba(255,255,255,0) 55%); mix-blend-mode:screen; } /* Keep the selected purple ring visible on top of the new shadow. The selected state lives on .ink-opt.on (parent), so just reinforce the ring's prominence when raised is active. */ .ink-opt.on .ink-foil-raised{ box-shadow: 0 0 0 2px var(--purple), 0 4px 8px rgba(142,33,202,.32), 0 1px 2px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.18); } .ink-opt:hover .ink-foil-raised{ transform:translateY(-2px); filter:brightness(1.12) saturate(1.08); } /* Foil-painted edge swatch sits in an .ink-sw-edge container — the lift effect belongs on the front edge band specifically so it reads as the gilding being raised, not the paper stack. The drop shadow goes on the outer .ink-sw-edge wrapper so it casts on the card beneath. */ .ink-sw-edge.ink-foil-raised{ transform:translateY(-1px); filter:drop-shadow(0 3px 5px rgba(0,0,0,.28)) drop-shadow(0 1px 2px rgba(0,0,0,.18)); } .ink-sw-edge.ink-foil-raised .ink-sw-edge-front{ box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.22); filter:brightness(1.08) saturate(1.06); } .ink-sw-edge.ink-foil-raised::after{ /* No-op — drop-shadow on the wrapper already sells the lift, and an ::after here would land outside the edge band shape. */ } [data-theme="dark"] .ink-foil-raised{ box-shadow: 0 4px 8px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.40), inset 0 -1px 0 rgba(0,0,0,.30); } [data-theme="dark"] .ink-opt.on .ink-foil-raised{ box-shadow: 0 0 0 2px var(--purple), 0 5px 10px rgba(142,33,202,.45), 0 1px 2px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.40), inset 0 -1px 0 rgba(0,0,0,.30); } /* ────────────────────────────────────────────────────────── Option swatches — visual chips that read clearly on BOTH themes. Every swatch has a contrast border that switches on data-theme. ────────────────────────────────────────────────────────── */ .ink-sw{ display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; width:36px;height:24px;border-radius:4px;overflow:visible; background:rgba(26,15,42,.04); box-shadow:inset 0 0 0 1px rgba(26,15,42,.08); } [data-theme="dark"] .ink-sw{background:rgba(243,235,239,.04);box-shadow:inset 0 0 0 1px rgba(243,235,239,.10)} /* Size swatch — flat top-down SVG mini-card, generously sized. Aspect ratios stay true so a square (3×3") reads visibly different from a standard (3.5×2") or a mini. Drop shadow alone gives the depth without any tilt. */ .ink-sw-size{ background:transparent;box-shadow:none; display:inline-flex;align-items:center;justify-content:center; width:120px;height:120px;flex:0 0 120px; margin:4px 6px 8px 0; } .ink-sw-size-svg{ filter:drop-shadow(0 3px 5px rgba(58,43,95,.16)) drop-shadow(0 1px 2px rgba(58,43,95,.10)); transition:transform .18s ease, filter .18s ease; } .ink-opt:hover .ink-sw-size-svg{ transform:scale(1.05); filter:drop-shadow(0 5px 8px rgba(58,43,95,.22)) drop-shadow(0 2px 3px rgba(58,43,95,.12)); } .ink-opt.on .ink-sw-size-svg{ transform:scale(1.06); filter:drop-shadow(0 6px 10px rgba(142,33,202,.28)) drop-shadow(0 2px 4px rgba(37,74,173,.18)); } .ink-opt.on .ink-sw-size-svg rect[fill="url(#sz-face)"], .ink-opt.on .ink-sw-size-svg ellipse[fill="url(#sz-face)"]{ /* Tint the card face purple when selected */ fill:rgba(142,33,202,.18); } [data-theme="dark"] .ink-sw-size-svg{ filter:drop-shadow(0 4px 6px rgba(0,0,0,.40)) drop-shadow(0 1px 2px rgba(0,0,0,.30)); } /* Thickness: one card seen at a slight 3/4 angle so its side edge shows. The edge height scales with .h to communicate paper thickness directly. */ .ink-sw-thick{ background:transparent;box-shadow:none; width:56px;height:44px; display:flex;align-items:center;justify-content:center; overflow:visible; padding:2px; } .ink-sw-thick-stack{ position:relative;display:inline-block;width:40px; transform:perspective(70px) rotateX(28deg); transform-origin:center; filter:drop-shadow(0 3px 3px rgba(0,0,0,.32)) drop-shadow(0 1px 1px rgba(0,0,0,.20)); } .ink-sw-thick-face{ display:block;width:100%;height:13px; background: linear-gradient(180deg,rgba(255,255,255,.6) 0%,transparent 30%), linear-gradient(135deg,#FFFFFF 0%,#F8F0DC 60%,#E8DCC4 100%); border:1px solid #3A2810;border-bottom-color:#1F1606; border-radius:2px 2px 0 0; position:relative;z-index:2; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); } .ink-sw-thick-edge{ display:block;width:100%;margin-top:-1px; background: repeating-linear-gradient(180deg,rgba(255,255,255,.45) 0,rgba(255,255,255,.45) .5px,rgba(50,30,10,.18) .5px,rgba(50,30,10,.18) 1px), linear-gradient(180deg,#EBE0CC 0%,#B89E70 60%,#8C7448 100%); border-left:1px solid #3A2810;border-right:1px solid #3A2810; border-bottom:1px solid #1F1606; border-radius:0 0 2px 2px; box-shadow:inset 0 -1px 0 rgba(0,0,0,.20); } [data-theme="dark"] .ink-sw-thick-face{ background: linear-gradient(180deg,rgba(255,255,255,.4) 0%,transparent 30%), linear-gradient(135deg,#F8EFD8 0%,#E0D2A8 60%,#BCAB7C 100%); border-color:#0F0A03;border-bottom-color:#000; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } [data-theme="dark"] .ink-sw-thick-edge{ background: repeating-linear-gradient(180deg,rgba(255,255,255,.30) 0,rgba(255,255,255,.30) .5px,rgba(0,0,0,.28) .5px,rgba(0,0,0,.28) 1px), linear-gradient(180deg,#BCAB7C 0%,#8A7548 60%,#5C4828 100%); border-color:#000; } .ink-opt.on .ink-sw-thick-face{ background: linear-gradient(180deg,rgba(255,255,255,.45) 0%,transparent 30%), linear-gradient(135deg,#E8C8F0 0%,#C078D8 60%,#8E21CA 100%); border-color:#2A0438;border-bottom-color:#180220; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .ink-opt.on .ink-sw-thick-edge{ background: repeating-linear-gradient(180deg,rgba(255,255,255,.30) 0,rgba(255,255,255,.30) .5px,rgba(0,0,0,.25) .5px,rgba(0,0,0,.25) 1px), linear-gradient(180deg,#8E21CA 0%,#5A0E80 60%,#34054E 100%); border-color:#180220; } /* Color swatch (finishes, foil tones, materials) — luxury treatment: soft top highlight reads as light catching a laminated surface; firm border keeps even pale cream swatches visible on both themes. */ .ink-sw-color{ background:transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 1px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.18); } [data-theme="dark"] .ink-sw-color{ box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 1px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.25), 0 0 0 1px rgba(0,0,0,.40); } /* Image swatch — photo texture (e.g. real metallic foil). Larger tile so the texture reads + a soft sheen overlay so the swatch reads the same in light and dark themes. */ .ink-sw-img{ width:54px;height:36px;border-radius:5px; background-size:cover;background-position:center;background-repeat:no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.30), inset 0 1px 0 rgba(255,255,255,.35); } [data-theme="dark"] .ink-sw-img{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.25); } /* When an image swatch is in a row, widen the option so the texture has space */ .ink-opt:has(.ink-sw-img){gap:12px} /* Corner Style — show the WHOLE card with per-corner rounding. Supports combination corners where only specific corners are rounded. */ .ink-sw-corner-full{background:transparent;box-shadow:none;width:46px;height:30px;display:flex;align-items:center;justify-content:center} .ink-sw-corner-card-full{ display:block;width:38px;height:24px; background:linear-gradient(135deg,#FFFFFF 0%,#F2EAD6 100%); border:1px solid #5A4520; box-shadow:0 1px 1.5px rgba(0,0,0,.15); } [data-theme="dark"] .ink-sw-corner-card-full{ background:linear-gradient(135deg,#F5EDDA 0%,#D4C5A0 100%); border-color:#2A2010; box-shadow:0 1px 1.5px rgba(0,0,0,.35); } .ink-opt.on .ink-sw-corner-card-full{ background:linear-gradient(135deg,#E8C8F0 0%,#8E21CA 100%); border-color:#3A0850; } /* Sides swatch (emboss / deboss / spot UV / raised UV / glitter UV) — two tiny card silhouettes with theme-aware fills + a purple glyph when active */ .ink-sw-sides{gap:2px;background:transparent;box-shadow:none} .ink-side-card .ink-side-rect{fill:rgba(26,15,42,.07);stroke:rgba(26,15,42,.45);stroke-width:.8} [data-theme="dark"] .ink-side-card .ink-side-rect{fill:rgba(243,235,239,.10);stroke:rgba(243,235,239,.40)} .ink-side-card.on .ink-side-rect{fill:rgba(142,33,202,.30);stroke:#8E21CA} [data-theme="dark"] .ink-side-card.on .ink-side-rect{fill:rgba(201,166,231,.35);stroke:#C9A6E7} .ink-side-glyph{fill:#8E21CA;stroke:none} .ink-side-glyph-stroke{stroke:#8E21CA;stroke-width:1;fill:none} .ink-side-glyph2{fill:#C58BEB} [data-theme="dark"] .ink-side-glyph{fill:#D4A8E8} [data-theme="dark"] .ink-side-glyph-stroke{stroke:#D4A8E8} [data-theme="dark"] .ink-side-glyph2{fill:#E8C5F0} .ink-sw-speed{color:var(--purple);background:transparent;box-shadow:none} [data-theme="dark"] .ink-sw-speed{color:#D4A8E8} .ink-sw-dots{gap:2px;padding:0 4px;background:transparent;box-shadow:none;width:auto;min-width:36px} .ink-dot{width:6px;height:6px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.35),0 0 0 .5px rgba(255,255,255,.6)} [data-theme="dark"] .ink-dot{box-shadow:inset 0 0 0 .5px rgba(255,255,255,.20),0 0 0 .5px rgba(0,0,0,.35)} .ink-dot-empty{background:transparent;box-shadow:inset 0 0 0 1px rgba(26,15,42,.35)} [data-theme="dark"] .ink-dot-empty{box-shadow:inset 0 0 0 1px rgba(243,235,239,.40)} .ink-dot-plus{font-family:'Space Mono',monospace;font-size:9px;color:var(--text-caption);font-weight:700;margin-left:1px} .ink-opt.on .ink-sw{background:rgba(142,33,202,.10)} .ink-opt.on .ink-sw-size > span{background:linear-gradient(135deg,rgba(142,33,202,.35),rgba(37,74,173,.35));border-color:var(--purple)} .ink-sel{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-warm);color:var(--text-heading);font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;outline:none} .ink-sel:focus{border-color:var(--purple)} /* Sticky price card */ .ink-calc-right{position:sticky;top:32px} .ink-price-card{padding:24px;border:1px solid var(--border);border-radius:14px;background:var(--dark2);box-shadow:var(--shadow-card)} .ink-price-eyebrow{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-caption);font-weight:700;margin-bottom:8px} .ink-price-big{font-family:'Instrument Serif',serif;font-size:48px;font-weight:400;letter-spacing:-.02em;line-height:1;color:var(--text-heading);font-variant-numeric:tabular-nums;background:var(--btn-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .ink-price-per{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text-caption);margin-top:4px;margin-bottom:18px} .ink-breakdown{list-style:none;padding:0;margin:0 0 18px 0;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border);padding-top:14px;max-height:320px;overflow-y:auto} .ink-breakdown li{display:flex;justify-content:space-between;font-family:'DM Sans',sans-serif;font-size:12px;color:var(--text-body);gap:10px} .ink-breakdown li span:last-child{color:var(--text-heading);font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0} .ink-breakdown li.ink-row-sub{border-top:1px dashed var(--border);padding-top:6px;margin-top:2px;font-weight:600;color:var(--text-heading)} .ink-breakdown li.ink-row-discount span:last-child{color:#27AE60} /* ── Shipping & taxes section ── */ .ink-ship-grid{display:grid;grid-template-columns:1fr;gap:14px} .ink-ship-note{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--text-caption);margin-top:6px;line-height:1.5} .ink-promo{display:flex;gap:6px;align-items:stretch} .ink-promo-input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-warm);color:var(--text-heading);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;text-transform:uppercase;letter-spacing:.05em} .ink-promo-input:focus{border-color:var(--purple)} .ink-promo-input::placeholder{text-transform:none;letter-spacing:0;color:var(--text-caption)} .ink-promo-btn{padding:0 16px;border:1px solid var(--purple);background:transparent;color:var(--purple);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;letter-spacing:.02em} .ink-promo-btn:hover{background:var(--purple);color:#fff} .ink-promo-status{margin-top:6px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.04em;display:flex;align-items:center;gap:8px} .ink-promo-ok{color:#27AE60} .ink-promo-err{color:#E74C3C} .ink-promo-clear{margin-left:auto;background:none;border:none;color:var(--text-caption);text-decoration:underline;cursor:pointer;font:inherit;padding:0} .ink-promo-clear:hover{color:var(--purple)} .ink-zip-input{margin-top:6px;width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-warm);color:var(--text-heading);font-family:'Space Mono',monospace;font-size:12px;outline:none;letter-spacing:.04em} .ink-zip-input:focus{border-color:var(--purple)} .ink-zip-input::placeholder{font-family:'DM Sans',sans-serif;letter-spacing:0;color:var(--text-caption)} .ink-ship-warn{margin-top:8px;padding:9px 12px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.30);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:11.5px;line-height:1.5;color:#8B5A00} [data-theme="dark"] .ink-ship-warn{background:rgba(245,158,11,.10);color:#F5B85C} /* Geolocation banner */ .ink-geo-banner{padding:10px 12px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:12px;line-height:1.5;margin-bottom:12px;display:flex;align-items:center;gap:8px} .ink-geo-pending{background:rgba(142,33,202,.06);border:1px solid rgba(142,33,202,.18);color:var(--purple)} .ink-geo-ok{background:rgba(39,174,96,.08);border:1px solid rgba(39,174,96,.28);color:#1F7A47} [data-theme="dark"] .ink-geo-ok{color:#5EE395} .ink-geo-warn{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.30);color:#8B5A00} [data-theme="dark"] .ink-geo-warn{color:#F5B85C} /* Ship-mode toggle (one vs separate addresses) */ .ink-ship-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px} .ink-ship-mode-btn{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-warm);cursor:pointer;text-align:left;font-family:'DM Sans',sans-serif;transition:.15s;color:var(--text-body)} .ink-ship-mode-btn:hover{border-color:rgba(142,33,202,.40)} .ink-ship-mode-btn.on{border-color:var(--purple);background:rgba(142,33,202,.08);color:var(--text-heading)} .ink-ship-mode-btn svg{flex-shrink:0;color:var(--purple);opacity:.7} .ink-ship-mode-btn.on svg{opacity:1} .ink-ship-mode-btn strong{display:block;font-size:13px;font-weight:600;color:var(--text-heading)} .ink-ship-mode-btn em{display:block;font-style:normal;font-size:11px;color:var(--text-caption);margin-top:2px;line-height:1.3} @media(max-width:560px){.ink-ship-mode{grid-template-columns:1fr}} /* Address form */ .ink-addr-form{padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--bg-warm);margin-bottom:10px} .ink-addr-form-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text-heading)} .ink-addr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px} .ink-addr-row-full{margin-bottom:10px} .ink-prod-field{display:flex;flex-direction:column;gap:4px;min-width:0} .ink-prod-field label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-caption);font-weight:700} .ink-prod-field input,.ink-prod-field select{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--dark2);color:var(--text-heading);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;transition:border-color .15s} .ink-prod-field input:focus,.ink-prod-field select:focus{border-color:var(--purple)} .ink-prod-field input::placeholder{color:var(--text-caption)} .ink-addr-phone-row{display:flex;gap:8px;align-items:stretch} .ink-addr-phone-row .ink-sel{padding:9px 10px} .ink-addr-phone-row input{padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--dark2);color:var(--text-heading);font-family:'DM Sans',sans-serif;font-size:13px;outline:none} .ink-addr-phone-row input:focus{border-color:var(--purple)} .ink-addr-req{margin-top:8px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--text-caption)} .ink-addr-collapse{margin-left:auto;background:none;border:1px solid var(--border);color:var(--purple);padding:5px 12px;border-radius:6px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:.15s} .ink-addr-collapse:hover{background:var(--purple);color:#fff;border-color:var(--purple)} /* Collapsed address summary */ .ink-addr-summary{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--dark2);margin-bottom:10px} .ink-addr-summary-l{display:flex;align-items:center;gap:10px;flex:1;min-width:0} .ink-addr-summary-l > svg{color:var(--purple);flex-shrink:0} .ink-addr-summary-l strong{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--text-heading);display:block} .ink-addr-summary-line{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--text-caption);margin-top:2px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ink-addr-edit{background:none;border:1px solid var(--border);color:var(--purple);padding:6px 14px;border-radius:6px;font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:600;cursor:pointer;transition:.15s;flex-shrink:0} .ink-addr-edit:hover{background:var(--purple);color:#fff;border-color:var(--purple)} .ink-ship-divider{height:1px;background:var(--border);margin:14px 0} /* ── "What's included with this template" strip (locked options) ── */ .ink-locked-strip{padding:12px 14px;border:1px solid rgba(142,33,202,.22);background:linear-gradient(135deg,rgba(142,33,202,.06),rgba(37,74,173,.06));border-radius:10px;margin-bottom:14px} .ink-locked-strip-lbl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.10em;text-transform:uppercase;color:var(--purple);font-weight:700;margin-bottom:8px} .ink-locked-strip-chips{display:flex;flex-wrap:wrap;gap:6px} .ink-locked-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid rgba(142,33,202,.22);background:var(--dark2);border-radius:6px;font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--text-heading);font-weight:500} .ink-locked-chip svg{color:var(--purple);opacity:.7;flex-shrink:0} .ink-locked-chip em{font-style:normal;font-weight:600;color:var(--purple)} .ink-cta{display:block;width:100%;padding:12px;background:var(--btn-gradient);color:#fff;border:none;border-radius:50px;font-family:'Instrument Serif',serif;font-style:italic;font-size:16px;font-weight:500;cursor:pointer;transition:.2s;box-shadow:0 4px 14px rgba(142,33,202,.25)} .ink-cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(142,33,202,.35)} .ink-foot{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--text-caption);text-align:center;margin-top:10px} /* ── Responsive ── */ @media(max-width:960px){ body{padding:16px} .ink-calc-wrap{grid-template-columns:1fr;gap:18px} .ink-calc-right{position:static} .ink-price-big{font-size:38px} } /* ── Light/dark theme toggle (fixed top-right) ── */ .ink-theme-toggle{ position:fixed;top:18px;right:18px;z-index:200; width:40px;height:40px;border-radius:50%; border:1px solid var(--border);background:var(--dark2); color:var(--text-heading);cursor:pointer; display:inline-flex;align-items:center;justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.10); transition:transform .15s,box-shadow .15s,border-color .15s; padding:0; } .ink-theme-toggle:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.16);border-color:rgba(142,33,202,.40);color:var(--purple)} .ink-theme-toggle .ink-theme-sun{display:none} .ink-theme-toggle .ink-theme-moon{display:inline-block} [data-theme="dark"] .ink-theme-toggle .ink-theme-sun{display:inline-block} [data-theme="dark"] .ink-theme-toggle .ink-theme-moon{display:none} @media(max-width:760px){.ink-theme-toggle{top:12px;right:12px;width:36px;height:36px}} /* ============================================================ Quote request form — for products/categories/templates without pricing yet ============================================================ */ .ink-quote-wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px} .ink-quote-head{margin-bottom:6px} .ink-quote-eyebrow{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;color:var(--purple);font-weight:700;margin-bottom:8px} .ink-quote-head h2{font-family:'Instrument Serif',serif;font-size:32px;font-weight:400;letter-spacing:-.02em;color:var(--text-heading)} .ink-quote-head h2 em{font-style:italic;background:var(--btn-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .ink-quote-head p{font-family:'DM Sans',sans-serif;font-size:14px;color:var(--text-body);margin-top:8px;line-height:1.55} .ink-quote-section{padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--dark2);display:flex;flex-direction:column;gap:10px} .ink-quote-section-title{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--text-heading);margin-bottom:4px} .ink-quote-optional{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--text-caption);font-weight:500;margin-left:6px;text-transform:uppercase} .ink-quote-label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-caption);font-weight:700;margin-top:6px} .ink-quote-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:560px){.ink-quote-row{grid-template-columns:1fr}} .ink-quote-field{display:flex;flex-direction:column;gap:4px;min-width:0} .ink-quote-field label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-caption);font-weight:700} .ink-quote-input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-warm);color:var(--text-heading);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;transition:border-color .15s} .ink-quote-input:focus{border-color:var(--purple)} textarea.ink-quote-input{font-family:'DM Sans',sans-serif;line-height:1.5;resize:vertical} .ink-quote-phone-row{display:flex;gap:8px} .ink-quote-phone-row > select{flex-shrink:0} .ink-quote-phone-row > input{flex:1} .ink-chip-row{display:flex;flex-wrap:wrap;gap:6px} .ink-chip{padding:7px 12px;border:1px solid var(--border);border-radius:30px;background:var(--bg-warm);color:var(--text-body);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:.15s} .ink-chip:hover{border-color:rgba(142,33,202,.40);color:var(--purple)} .ink-chip.on{background:var(--purple);color:#fff;border-color:var(--purple)} .ink-quote-file-drop{display:block;padding:24px;border:1.5px dashed rgba(142,33,202,.35);border-radius:10px;background:rgba(142,33,202,.04);text-align:center;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text-body);transition:.15s} .ink-quote-file-drop:hover{background:rgba(142,33,202,.08);border-color:var(--purple)} .ink-quote-file-drop input{display:none} .ink-quote-files{display:flex;flex-direction:column;gap:6px;margin-top:8px} .ink-quote-file{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-warm);border:1px solid var(--border);border-radius:7px;font-family:'DM Sans',sans-serif;font-size:12px;color:var(--text-heading)} .ink-quote-file em{font-style:normal;color:var(--text-caption);font-size:11px;margin-left:auto} .ink-quote-file button{background:none;border:none;font-size:18px;color:var(--text-caption);cursor:pointer;padding:0 4px} .ink-quote-file button:hover{color:#E74C3C} .ink-quote-submit{padding:14px;background:var(--btn-gradient);color:#fff;border:none;border-radius:50px;font-family:'Instrument Serif',serif;font-style:italic;font-size:17px;font-weight:500;cursor:pointer;transition:.2s;box-shadow:0 4px 14px rgba(142,33,202,.25);margin-top:6px} .ink-quote-submit:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 8px 22px rgba(142,33,202,.35)} .ink-quote-submit[disabled]{opacity:.45;cursor:not-allowed} .ink-quote-hint{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--text-caption);text-align:center} .ink-quote-success{padding:48px 32px;text-align:center;border:1px solid rgba(39,174,96,.30);background:rgba(39,174,96,.06);border-radius:14px} .ink-quote-success svg{color:#27AE60;margin-bottom:14px} .ink-quote-success h2{font-family:'Instrument Serif',serif;font-size:26px;font-weight:400;color:var(--text-heading);margin-bottom:10px} .ink-quote-success p{font-family:'DM Sans',sans-serif;font-size:14px;color:var(--text-body);line-height:1.5;margin-bottom:8px} .ink-quote-success code{font-family:'Space Mono',monospace;background:rgba(142,33,202,.10);color:var(--purple);padding:3px 9px;border-radius:6px;font-size:12px;font-weight:700} /* ── Section tooltips ── */ .ink-tip{display:inline-flex;align-items:center;position:relative;margin-left:6px;vertical-align:middle;line-height:0} .ink-tip-btn{ border:none;background:transparent;padding:1px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; color:var(--text-caption);border-radius:50%; transition:color .15s,background .15s; } .ink-tip-btn:hover,.ink-tip-btn:focus{color:var(--purple);background:rgba(142,33,202,.10);outline:none} .ink-tip-bubble{ position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%); background:var(--text-heading);color:var(--dark); padding:11px 13px;border-radius:8px; font-family:'DM Sans',sans-serif;font-size:12px;line-height:1.5; font-weight:400;letter-spacing:0;text-transform:none; white-space:normal;text-align:left; width:300px;max-width:80vw; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .15s,visibility .15s,transform .15s; box-shadow:0 10px 28px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.10); z-index:30; } .ink-tip-bubble::after{ content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%); width:0;height:0;border:6px solid transparent;border-top-color:var(--text-heading); } .ink-tip:hover .ink-tip-bubble, .ink-tip-btn:focus + .ink-tip-bubble, .ink-tip.open .ink-tip-bubble{ opacity:1;visibility:visible;pointer-events:auto; } /* Avoid clipping inside the accordion summary's overflow context */ .ink-acc summary{position:relative;overflow:visible} .ink-acc{overflow:visible} .ink-block,.ink-block-lbl{overflow:visible} /* ── Delivery estimate banner (production + shipping date range) ── */ .ink-delivery{ margin-bottom:14px;padding:14px 16px; border:1px solid rgba(142,33,202,.30); background:linear-gradient(135deg,rgba(142,33,202,.06),rgba(37,74,173,.06)); border-radius:10px; } .ink-delivery-l{display:flex;align-items:flex-start;gap:12px} .ink-delivery-l > svg{color:var(--purple);flex-shrink:0;margin-top:2px} .ink-delivery-eyebrow{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.10em;text-transform:uppercase;color:var(--purple);font-weight:700;margin-bottom:3px} .ink-delivery-dates{font-family:'Instrument Serif',serif;font-size:22px;line-height:1.1;color:var(--text-heading);letter-spacing:-.01em;margin-bottom:5px} .ink-delivery-detail{font-family:'Space Mono',monospace;font-size:10.5px;line-height:1.5;color:var(--text-caption);letter-spacing:.02em} /* Promo code lives inside the price card now — separated from breakdown by a dashed rule */ .ink-price-promo{margin:0 0 16px 0;padding-top:14px;border-top:1px dashed var(--border)} .ink-price-promo .ink-block-lbl{margin-bottom:8px !important} /* Delivery as a standalone section after Shipping */ .ink-delivery-block .ink-delivery{margin-bottom:0} /* Center finish options — there are usually only 2, so a centered flex row reads better than a grid that pushes them to the left. */ .ink-acc[data-section="finish"] .ink-opts{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px; grid-template-columns:none; } .ink-acc[data-section="finish"] .ink-opt{width:200px;max-width:100%} /* Out-of-stock options — visually disabled, click-blocked via native `disabled` attribute. The whole tile dims (the swatch/label/meta) and gets a diagonal strike-through pattern to read as "unavailable" without hiding the option entirely (so customers still see what's normally on the menu and which specific colors are temporarily out). */ .ink-opt-oos{ opacity:.42;cursor:not-allowed !important; filter:saturate(.4); position:relative; } .ink-opt-oos:hover{transform:none;border-color:var(--border)} .ink-opt-oos .ink-opt-lbl{text-decoration:line-through;text-decoration-thickness:1px} .ink-opt-oos .ink-opt-meta{ background:rgba(168,80,80,.10); color:#A04A4A; font-weight:700;font-size:10px;letter-spacing:.04em; text-transform:uppercase; padding:2px 6px;border-radius:4px; } [data-theme="dark"] .ink-opt-oos .ink-opt-meta{ background:rgba(255,140,140,.15);color:#FFB0B0; } /* ── Section groups ── Three top-level groups divide the long picker into scannable bands: "Set up your order" / "Add embellishments" / "Production & delivery". Just a visual divider + heading — every accordion inside stays open and scrollable. No collapse behavior so customers never miss upgrades. */ .ink-group{ margin:0;padding:0; } .ink-group + .ink-group{ margin-top:32px; padding-top:24px; border-top:1px solid var(--border); } .ink-group-title{ font-family:'Instrument Serif',serif; font-size:26px;font-weight:400;letter-spacing:-.015em; color:var(--text-heading); margin:0 0 14px;padding:0; line-height:1.2; } [data-theme="dark"] .ink-group + .ink-group{ border-top-color:rgba(243,235,239,.12); } /* Foil Type toggle — Standard / Raised pills above the Foil Colors picker. Same color palette either way; the pills just switch the press-pass pricing model behind the scenes. */ .ink-foiltype-row{ display:flex;align-items:center;gap:12px; margin:0 0 14px;padding:10px 12px; background:rgba(142,33,202,.05); border:1px solid rgba(142,33,202,.15); border-radius:8px; } .ink-foiltype-lbl{ font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600; color:var(--text-heading);flex:0 0 auto; } .ink-foiltype-pills{ display:inline-flex;gap:3px;padding:3px; background:var(--dark2);border:1px solid var(--border);border-radius:7px; } .ink-foiltype-pill{ padding:6px 14px;border:none;background:transparent; font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600; color:var(--text-caption);cursor:pointer;border-radius:5px;transition:.15s; } .ink-foiltype-pill:hover{color:var(--purple)} .ink-foiltype-pill.on{background:var(--purple);color:#fff} .ink-foiltype-pill.off, .ink-foiltype-pill[disabled]{ color:var(--text-caption);opacity:.4;cursor:not-allowed; background:transparent; } .ink-foiltype-pill.off:hover, .ink-foiltype-pill[disabled]:hover{color:var(--text-caption)} .ink-foiltype-note{ flex:1 1 100%;margin-top:6px; font-family:'DM Sans',sans-serif;font-size:11.5px;font-style:italic; color:var(--text-caption); } /* "What's available on this material" callout — surfaces beneath the Material picker whenever the active material isn't Paper. Tells customers in one glance which sections are hidden and which carry a premium, so switching materials doesn't feel like sections randomly disappear. */ .ink-mat-availability{ margin:0 0 18px;padding:11px 14px; background:rgba(142,33,202,.04); border:1px solid rgba(142,33,202,.18); border-radius:9px; display:flex;flex-direction:column;gap:7px; } .ink-mat-availability-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap} .ink-mat-availability-tag{ flex:0 0 auto; padding:3px 9px;border-radius:5px; font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700; letter-spacing:.05em;text-transform:uppercase; background:rgba(231,76,60,.12);color:#A04A4A; border:1px solid rgba(231,76,60,.20); } .ink-mat-availability-tag-premium{ background:rgba(142,33,202,.10);color:var(--purple); border-color:rgba(142,33,202,.25); } .ink-mat-availability-text{ flex:1;min-width:0; font-family:'DM Sans',sans-serif;font-size:12px; color:var(--text-body);line-height:1.5; } /* Inline note inside an accordion section — used by Paper Finish when the picker is restricted by the current Paper Color choice. */ .ink-acc-note{ margin-top:12px;padding:10px 12px; font-family:'DM Sans',sans-serif;font-size:12px;color:var(--text-body); line-height:1.5; background:rgba(142,33,202,.06); border:1px solid rgba(142,33,202,.20); border-radius:6px; } [data-theme="dark"] .ink-acc-note{ background:rgba(201,166,231,.10); border-color:rgba(201,166,231,.25); } /* Colored Edges — category header that spans the full grid row, separating Standard Ink / Fluorescent / Foil entries within the single picker. */ .ink-opts-cat{ grid-column:1 / -1; padding:10px 4px 4px; font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-caption); font-weight:700; border-top:1px dashed var(--border); margin-top:4px; } .ink-opts-cat:first-child{border-top:none;margin-top:0;padding-top:0} /* Edge swatch — 3D stack of business cards viewed at a slight 3/4 angle so the painted side edge is visible as a real physical surface, not a border. Anatomy (bottom-up): .ink-sw-edge-stack — outer container; sets perspective + drop shadow .ink-sw-edge-top — top face (cream paper, slightly trapezoidal) .ink-sw-edge-front — thick painted band across the FRONT of the stack .ink-sw-edge-lines — thin horizontal hairlines suggesting individual cards .ink-sw-edge-gloss — gentle highlight along the top of the painted edge .ink-sw-edge-side — narrow painted sliver on the RIGHT of the stack */ .ink-sw-edge{ display:inline-flex;align-items:center;justify-content:center; width:64px;height:52px;flex:0 0 64px; } .ink-sw-edge-stack{ position:relative;width:54px;height:42px; filter:drop-shadow(0 3px 4px rgba(58,43,95,.22)) drop-shadow(0 1px 2px rgba(58,43,95,.14)); } .ink-sw-edge-top{ position:absolute;left:1px;right:1px;top:0;height:18px; background:linear-gradient(180deg,#FCF6E9,#EBDFC2); border:1px solid rgba(58,43,95,.42); border-bottom:none; /* Trapezoidal — slightly narrower at the top to imply perspective */ clip-path:polygon(4% 0, 96% 0, 100% 100%, 0 100%); } .ink-sw-edge-front{ position:absolute;left:0;right:6px;top:17px;bottom:0; border:1px solid rgba(58,43,95,.55); border-top:1px solid rgba(58,43,95,.30); overflow:hidden; } .ink-sw-edge-stack.is-none .ink-sw-edge-front{ /* "None" — paint the front edge the same cream as the top, no color */ background:linear-gradient(180deg,#EBDFC2,#D8C9A5) !important; } .ink-sw-edge-lines{ position:absolute;inset:0; /* Horizontal stack lines — each line = one card in the stack */ background:repeating-linear-gradient( 180deg, transparent 0, transparent 2px, rgba(0,0,0,.18) 2px, rgba(0,0,0,.18) 2.6px ); opacity:.55;mix-blend-mode:multiply; } .ink-sw-edge-gloss{ position:absolute;left:0;right:0;top:0;height:35%; background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0)); pointer-events:none; } .ink-sw-edge-side{ position:absolute;right:0;top:8px;bottom:0;width:7px; border:1px solid rgba(58,43,95,.55); border-left:none; /* Trapezoidal sliver to imply the right-side perspective */ clip-path:polygon(0 0, 100% 8%, 100% 100%, 0 100%); } /* Shape swatches — SVG silhouettes for die-cut shapes (Rectangle, Oval, etc.) */ .ink-sw-shape{display:inline-flex;align-items:center;justify-content:center;width:42px;height:30px} .ink-shape-fill{ fill:rgba(26,15,42,.08); stroke:var(--text-body); stroke-width:1.2; } [data-theme="dark"] .ink-shape-fill{ fill:rgba(243,235,239,.10); stroke:rgba(243,235,239,.65); } .ink-opt.on .ink-shape-fill{ fill:rgba(142,33,202,.18); stroke:#8E21CA; } [data-theme="dark"] .ink-opt.on .ink-shape-fill{ fill:rgba(201,166,231,.25); stroke:#C9A6E7; } /* Corner Style — step-2 picker for WHICH corners receive the chosen radius. Renders inside the Corner Style accordion, below the radius grid. Hidden when the radius is Square (no rounding to apply). */ .ink-corner-pos-wrap{ margin-top:14px;padding-top:14px;border-top:1px dashed var(--border); } .ink-corner-pos-head{ display:flex;justify-content:space-between;align-items:center;gap:10px; font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:var(--text-body); margin-bottom:10px; } .ink-corner-all{ padding:4px 10px;border:1px solid var(--border);background:transparent; color:var(--text-caption);font-family:'DM Sans',sans-serif;font-size:11px; font-weight:600;border-radius:5px;cursor:pointer;transition:.15s; } .ink-corner-all:hover{border-color:var(--purple);color:var(--purple)} .ink-corner-all.on{background:var(--purple);color:#fff;border-color:var(--purple)} .ink-corner-pos-row{ display:grid;grid-template-columns:repeat(4,1fr);gap:6px; } .ink-corner-pos{ display:flex;flex-direction:column;align-items:center;gap:6px; padding:10px 6px;border:1px solid var(--border);background:var(--bg-warm); border-radius:8px;cursor:pointer;transition:.15s; } .ink-corner-pos:hover{border-color:rgba(142,33,202,.40)} .ink-corner-pos.on{border-color:var(--purple);background:rgba(142,33,202,.08)} .ink-corner-pos-mini{ display:block;width:34px;height:22px;position:relative; } .ink-corner-pos-mini-card{ position:absolute;inset:0; background:rgba(26,15,42,.06); border:1.5px solid var(--text-caption); display:block; } [data-theme="dark"] .ink-corner-pos-mini-card{background:rgba(243,235,239,.06)} .ink-corner-pos.on .ink-corner-pos-mini-card{ background:rgba(142,33,202,.20);border-color:var(--purple); } [data-theme="dark"] .ink-corner-pos.on .ink-corner-pos-mini-card{ background:rgba(201,166,231,.28);border-color:#C9A6E7; } .ink-corner-pos-lbl{ font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:500; color:var(--text-caption);text-align:center;line-height:1.2; } .ink-corner-pos.on .ink-corner-pos-lbl{color:var(--purple);font-weight:600} [data-theme="dark"] .ink-corner-pos.on .ink-corner-pos-lbl{color:#C9A6E7} /* Big live preview at the top of the corners picker — the anchor visual. */ .ink-corner-preview-block{ display:flex;flex-direction:column;align-items:center;gap:10px; padding:14px;background:var(--bg-warm);border:1px solid var(--border); border-radius:10px;margin-bottom:14px; } .ink-corner-preview-card{ width:140px;height:80px; background:linear-gradient(135deg,#FFFFFF,#F1ECE2); border:1.5px solid var(--text-body); box-shadow:0 4px 14px rgba(26,15,42,.10); } [data-theme="dark"] .ink-corner-preview-card{ background:linear-gradient(135deg,#2A1B3F,#1F1530); border-color:rgba(243,235,239,.55); box-shadow:0 4px 14px rgba(0,0,0,.30); } .ink-corner-preview-desc{ font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600; color:var(--text-heading);text-align:center;letter-spacing:-.005em; } /* Printed Side(s) — only 3 options, center them and give the F/B card visuals more room so the imagery reads at a glance. */ .ink-acc[data-section="printedSides"] .ink-opts{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px; grid-template-columns:none; } .ink-acc[data-section="printedSides"] .ink-opt{width:180px;max-width:100%} /* Custom Die Cut Shapes — only 2 options (None / Custom shape), center them so they don't read as a sparse left-aligned grid. */ .ink-acc[data-section="dieCut"] .ink-opts{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px; grid-template-columns:none; } .ink-acc[data-section="dieCut"] .ink-opt{width:220px;max-width:100%} /* Material — 5 options (Paper / Plastic / Wood / Leather / Acrylic). 2-col on narrow screens, 3-col on wider so the 5th doesn't dangle as a lone bottom-row card on its own. */ .ink-acc[data-section="material"] .ink-opts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; } .ink-acc[data-section="material"] .ink-opt{width:auto;max-width:100%} .ink-sw-material{ display:inline-flex;align-items:center;justify-content:center; width:58px;height:42px; } .ink-sw-material svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.12))} [data-theme="dark"] .ink-sw-material svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.40))} /* Laser Cut — only 3 options (None / Simple / Intricate), center them. */ .ink-acc[data-section="laserCut"] .ink-opts{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px; grid-template-columns:none; } .ink-acc[data-section="laserCut"] .ink-opt{width:220px;max-width:100%} /* Emboss / Deboss — only 3 options each, center them and give the 3D-illustrated card swatches enough room to read. */ .ink-acc[data-section="emboss"] .ink-opts, .ink-acc[data-section="deboss"] .ink-opts{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px; grid-template-columns:none; } .ink-acc[data-section="emboss"] .ink-opt, .ink-acc[data-section="deboss"] .ink-opt{width:200px;max-width:100%} /* Spot UV Gloss / Raised Spot UV Gloss — same 3-option pattern as Emboss. */ .ink-acc[data-section="spotUv"] .ink-opts, .ink-acc[data-section="raisedUv"] .ink-opts, .ink-acc[data-section="glitterUv"] .ink-opts, .ink-acc[data-section="raisedInk"] .ink-opts{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px; grid-template-columns:none; } .ink-acc[data-section="spotUv"] .ink-opt, .ink-acc[data-section="raisedUv"] .ink-opt, .ink-acc[data-section="glitterUv"] .ink-opt, /* Ink Types — multi-select grid; show as wide tiles since each option carries its own descriptor. */ .ink-acc[data-section="inkTypes"] .ink-opts{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px; } .ink-acc[data-section="inkTypes"] .ink-opt > .ink-sw{ width:48px;height:30px;border-radius:6px; border:1px solid rgba(58,43,95,.30); } /* Pantone Spot Color sub-picker — shown inside Ink Types when Pantone Spot is selected. Groups popular colors by hue family, plus a custom-code text input. Each selected color adds one press setup at the per-tier rate. */ .ink-pantone-picker{ margin-top:14px;padding-top:14px; border-top:1px dashed var(--border); } .ink-pantone-head{ font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700; color:var(--text-heading);margin-bottom:10px; } .ink-pantone-fam{margin-bottom:10px} .ink-pantone-fam-lbl{ font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--text-caption);font-weight:700; margin-bottom:5px; } .ink-pantone-fam-chips{display:flex;flex-wrap:wrap;gap:5px} .ink-pantone-chip{ display:inline-flex;align-items:center;gap:5px; padding:4px 9px 4px 4px;border:1px solid var(--border); background:var(--bg-warm);border-radius:14px;cursor:pointer; font-family:'DM Sans',sans-serif;font-size:11px;color:var(--text-body); transition:.15s; } .ink-pantone-chip:hover{border-color:rgba(142,33,202,.40)} .ink-pantone-chip.on{ border-color:var(--purple);background:rgba(142,33,202,.10); color:var(--purple);font-weight:600; } .ink-pantone-dot{ display:inline-block;width:14px;height:14px;border-radius:50%; border:1px solid rgba(0,0,0,.20);flex-shrink:0; } .ink-pantone-label{white-space:nowrap} .ink-pantone-custom{ margin-top:12px;padding-top:10px; border-top:1px dashed var(--border); } .ink-pantone-custom-lbl{ font-family:'DM Sans',sans-serif;font-size:12px;color:var(--text-body); margin-bottom:6px; } .ink-pantone-custom-row{display:flex;gap:6px} .ink-pantone-custom-input{ flex:1;padding:7px 11px;border:1px solid var(--border);border-radius:6px; background:var(--bg-warm);color:var(--text-heading); font-family:'DM Sans',sans-serif;font-size:13px;outline:none; } .ink-pantone-custom-input:focus{border-color:var(--purple)} .ink-pantone-custom-add{ padding:7px 14px;border:1px solid var(--purple); background:var(--purple);color:#fff;border-radius:6px;cursor:pointer; font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600; transition:.15s; } .ink-pantone-custom-add:hover{background:transparent;color:var(--purple)} .ink-pantone-custom-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px} .ink-pantone-custom-chip{ display:inline-flex;align-items:center;gap:4px; padding:4px 4px 4px 10px; background:rgba(142,33,202,.10);color:var(--purple); border:1px solid var(--purple);border-radius:14px; font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600; } .ink-pantone-custom-x{ background:transparent;border:none;color:inherit;cursor:pointer; font-size:14px;line-height:1;padding:2px 6px;border-radius:50%; } .ink-pantone-custom-x:hover{background:rgba(142,33,202,.20)} .ink-pantone-count{ margin-top:10px;padding:8px 12px; background:rgba(142,33,202,.06);border-radius:6px; font-family:'DM Sans',sans-serif;font-size:12px;color:var(--text-body); line-height:1.5; } .ink-pantone-count strong{color:var(--purple)} .ink-pantone-count-empty{color:var(--text-caption);font-style:italic} .ink-sw-emboss{ display:inline-flex;align-items:center;justify-content:center; /* Width is generous to fit the side-by-side FRONT|BACK pair on "Both sides"; "None" and "One side" SVGs are narrower and naturally center inside. */ min-width:60px;height:42px; } .ink-sw-emboss svg{display:block} /* Spot UV Gloss swatches render bigger than emboss/deboss/raised-ink so the monogram + gloss detail + glitter speckle layer all stay legible. Scoped via the accordion's data-section so only the Spot UV picker scales up. */ .ink-acc[data-section="spotUv"] .ink-sw-emboss{ min-width:140px;height:96px; } .ink-acc[data-section="spotUv"] .ink-sw-emboss svg{ width:auto;height:auto;max-width:100%;max-height:100%; } /* In dark mode the warm parchment swatch reads OK against the dark card background, but boost contrast slightly so the 3D star really pops. */ [data-theme="dark"] .ink-sw-emboss svg{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); } /* Laser cut swatch — a small landscape card with the cuts drawn as "holes" (light center) so it reads as material removed by the laser. */ .ink-sw-laser{display:inline-flex;align-items:center;justify-content:center;width:46px;height:30px} .ink-laser-card{ fill:rgba(26,15,42,.08); stroke:var(--text-body); stroke-width:1; } [data-theme="dark"] .ink-laser-card{ fill:rgba(243,235,239,.08); stroke:rgba(243,235,239,.55); } .ink-opt.on .ink-laser-card{ fill:rgba(142,33,202,.15); stroke:#8E21CA; } [data-theme="dark"] .ink-opt.on .ink-laser-card{ fill:rgba(201,166,231,.22); stroke:#C9A6E7; } .ink-laser-cuts circle, .ink-laser-cuts path{ fill:var(--bg-warm); stroke:var(--text-body); } [data-theme="dark"] .ink-laser-cuts circle, [data-theme="dark"] .ink-laser-cuts path{ fill:#1A0F2A; stroke:rgba(243,235,239,.65); } .ink-opt.on .ink-laser-cuts circle, .ink-opt.on .ink-laser-cuts path{stroke:#8E21CA} [data-theme="dark"] .ink-opt.on .ink-laser-cuts circle, [data-theme="dark"] .ink-opt.on .ink-laser-cuts path{stroke:#C9A6E7} .ink-laser-cuts-stroke path[fill="none"], .ink-laser-cuts-stroke circle[fill="none"]{fill:none} .ink-acc[data-section="printedSides"] .ink-sw-sides{transform:scale(1.6);transform-origin:left center;margin-right:10px} .ink-side-letter{fill:rgba(26,15,42,.55)} [data-theme="dark"] .ink-side-letter{fill:rgba(243,235,239,.55)} .ink-side-card.on .ink-side-letter{fill:#8E21CA;font-weight:700} [data-theme="dark"] .ink-side-card.on .ink-side-letter{fill:#C9A6E7} /* ── Multi-select checkmark + per-item side picker ── */ .ink-opt-check{ position:absolute;top:6px;right:6px; width:18px;height:18px;border-radius:50%; background:var(--purple);color:#fff; font-size:11px;font-weight:700; display:inline-flex;align-items:center;justify-content:center; box-shadow:0 1px 3px rgba(142,33,202,.40); z-index:2; } .ink-side-picker{ display:inline-flex;gap:3px; margin-top:6px;padding:3px; background:var(--bg-warm);border:1px solid var(--border);border-radius:30px; } [data-theme="dark"] .ink-side-picker{background:rgba(243,235,239,.05)} .ink-side-pill{ padding:4px 10px; font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:600; color:var(--text-caption);cursor:pointer;border-radius:30px;transition:.12s; user-select:none; } .ink-side-pill:hover{color:var(--purple)} .ink-side-pill.on{background:var(--purple);color:#fff}