/* /assets/card-themes.css Theme overrides + accent tokens */ :root{ --snapon-red:#d1132a; --snapon-dark:#0b0b0c; --snapon-paper:#ffffff; --snapon-ink:#0f172a; --snapon-border:rgba(0,0,0,.10); --snapon-shadow:0 18px 46px rgba(0,0,0,.12); } /* Snap-on theme */ .slFlipCard.theme-snapon{ --slAccent: var(--snapon-red); --slFrontBg: var(--snapon-paper); --slBackBg: linear-gradient(180deg, #0b0b0c 0%, #0a1220 100%); --slFaceBorder: var(--snapon-border); --slBackBorder: rgba(255,255,255,.10); --slBackStripe: rgba(209,19,42,.32); /* Back watermark (uses cards.css watermark engine) */ --slBackWatermarkImg: url("snaponlogo.png"); --slBackWatermarkSize: 130% auto; --slBackWatermarkOpacity: .10; --slBackWatermarkFilter: grayscale(1) contrast(1.05); } /* Snap-on stronger framing */ .slFlipCard.theme-snapon .slFlipFace{ outline: 2px solid rgba(209,19,42,.95); outline-offset: -3px; box-shadow: var(--snapon-shadow); /* 3D rendering: keep faces identical size. IMPORTANT: do NOT override .slFront/.slBack transforms here. */ will-change: transform; transform-style: preserve-3d; } .slFlipCard.theme-snapon .slFrontBar{ background: var(--snapon-red); height: 10px; opacity: 1; } .slFlipCard.theme-snapon .slKicker{ color: rgba(15,23,42,.70); } .slFlipCard.theme-snapon .slName{ color: var(--snapon-ink); } .slFlipCard.theme-snapon .slMeta{ color: rgba(17,24,39,.85); } /* Snap-on logo badge larger */ .slFlipCard.theme-snapon .slLogoBadge{ position: absolute; right: 16px; bottom: 16px; width: 84px; height: 84px; border-radius: 18px; background: rgba(255,255,255,.98); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 18px 36px rgba(0,0,0,.18); } .slFlipCard.theme-snapon .slTop{ padding-right: 118px; } .slFlipCard.theme-snapon .slFront .slFaceInner > div:last-child{ padding-right: 118px; } .slFlipCard.theme-snapon .slBack .slShowMore{ background: var(--snapon-red); border-color: rgba(255,255,255,.12); color: #fff; } .slFlipCard.theme-snapon .slBack .slShowMore:hover{ filter: brightness(.96); } .slFlipCard.theme-snapon .slTop{ padding-right: 92px; } .slFlipCard.theme-snapon .slFront .slFaceInner > div:last-child{ padding-right: 92px; } .slFlipCard.theme-snapon .slFrontBar{ height: 9px; } /* Accent token helpers */ .slFlipCard.sl-accent-warm-amber{ --slAccent:#b45309; } .slFlipCard.sl-accent-mocha-cream{ --slAccent:#7c5a3a; } .slFlipCard.sl-accent-soft-violet{ --slAccent:#6d28d9; } .slFlipCard.sl-accent-steel-blue{ --slAccent:#2563eb; } .slFlipCard.sl-accent-green-navy{ --slAccent:#0f766e; } .slFlipCard.sl-accent-industrial-yellow{ --slAccent:#ca8a04; } .slFlipCard.sl-accent-navy-gold{ --slAccent:#1e3a8a; } .slFlipCard.sl-accent-friendly-teal{ --slAccent:#0d9488; } /* Optional feels */ .slFlipCard.theme-minimal{ --slFaceBorder: rgba(0,0,0,.06); } .slFlipCard.theme-utility-split{ --slFaceBorder: rgba(0,0,0,.08); } .slFlipCard.theme-menu-focus{ --slBackBg:#111111; } .slFlipCard.theme-review-forward{ --slBackBg:#0b1220; } .slFlipCard.theme-community-notice{ --slBackBg:#0f172a; } .slFlipCard.theme-community-notice{ --slBackBg:#0f172a; } /* ===================================================================== Profile Saved (matches Profile → Saved card design) Dotted paper front + deep realistic dark back ===================================================================== */ .slFlipCard.theme-profile-saved{ --slCardRadius: 18px; /* keep the strong “physical card” lift from cards.css */ /* (we don't override --slLiftShadow here on purpose) */ } /* Keep inner layout a bit roomier (matches Profile) */ .slFlipCard.theme-profile-saved .slFaceInner{ padding: 16px; gap: 10px; } /* ------------------------- FRONT: dotted paper ------------------------- */ .slFlipCard.theme-profile-saved .slFront{ background:#ffffff; } /* Override the default paper grain on the FRONT only */ .slFlipCard.theme-profile-saved .slFront::before{ content:""; position:absolute; inset: 0; z-index:0; pointer-events:none; opacity: .22; background: radial-gradient(rgba(17,17,17,.07) 0.7px, transparent 0.7px) 0 0/18px 18px, radial-gradient(rgba(17,17,17,.03) 0.9px, transparent 0.9px) 9px 9px/36px 36px; transform:none; } /* Typography to match the “Saved” feel */ .slFlipCard.theme-profile-saved .slKicker{ font: 800 11px/1 Inter,system-ui,sans-serif; letter-spacing: .22em; opacity: .55; } .slFlipCard.theme-profile-saved .slName{ font: 900 18px/1.15 Merriweather, Georgia, serif; } .slFlipCard.theme-profile-saved .slMeta{ margin-top: 6px; font: 600 14px/1.35 Inter,system-ui,sans-serif; color:#374151; opacity:.95; } /* Badge */ .slFlipCard.theme-profile-saved .slLogoBadge{ width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.95); border: 1px solid rgba(229,231,235,.95); box-shadow: 0 10px 24px rgba(0,0,0,.10); } .slFlipCard.theme-profile-saved .slLogoText{ font: 800 13px/1 Inter,system-ui,sans-serif; } .slFlipCard.theme-profile-saved .slLogoImg{ padding: 7px; } .slFlipCard.theme-profile-saved .slLabel{ font: 700 11px/1 Inter,system-ui,sans-serif; letter-spacing: .18em; } .slFlipCard.theme-profile-saved .slAddress{ margin-top: 6px; font: 600 14px/1.35 Inter,system-ui,sans-serif; } /* CTA pill (front + back) */ .slFlipCard.theme-profile-saved .slShowMore{ margin-top: 10px; padding: .55rem .95rem; font: 800 13px/1 Inter,system-ui,sans-serif; border-radius: 999px; border: 1px solid #e5e7eb; background:#fff; color:#111827; box-shadow: 0 10px 24px rgba(0,0,0,.08); } .slFlipCard.theme-profile-saved .slShowMore:hover{ background:#f5f5f5; transform:none; } /* ------------------------- BACK: deep, glossy, “real card” look (and remove the dotted grain from the back) ------------------------- */ .slFlipCard.theme-profile-saved .slBack{ background: radial-gradient(120% 140% at 18% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 58%), radial-gradient(140% 160% at 85% 125%, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%), linear-gradient(155deg, #111b2e 0%, #0b1220 52%, #070b15 100%); border-color: rgba(255,255,255,.10); outline: 1px solid rgba(255,255,255,.18); outline-offset: -2px; box-shadow: 0 34px 70px rgba(0,0,0,.22), 0 18px 30px rgba(0,0,0,.14), 0 8px 12px rgba(0,0,0,.12), 0 2px 3px rgba(0,0,0,.10); } /* Back texture / gloss layer (replaces default paper grain) */ .slFlipCard.theme-profile-saved .slBack::before{ content:""; position:absolute; inset: 0; z-index:0; pointer-events:none; opacity: .95; background: radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 62%), linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0) 38%); transform:none; } /* Make the default inner-edge shading from cards.css feel right on dark */ .slFlipCard.theme-profile-saved .slBack::after{ opacity: .55; } /* Top stripe on back */ .slFlipCard.theme-profile-saved .slBackStripe{ height: 12px; border-radius: 999px; background: rgba(255,255,255,.10); opacity: 1; } /* Back copy colors */ .slFlipCard.theme-profile-saved .slMuted{ color: rgba(255,255,255,.65); } .slFlipCard.theme-profile-saved .slBack .slName, .slFlipCard.theme-profile-saved .slBack .slMeta, .slFlipCard.theme-profile-saved .slBack .slVal, .slFlipCard.theme-profile-saved .slBack .slTagline{ color: rgba(255,255,255,.92); } .slFlipCard.theme-profile-saved .slKV{ margin-top: 12px; gap: 10px; font: 600 14px/1.2 Inter,system-ui,sans-serif; } .slFlipCard.theme-profile-saved .slFront .slLink{ color: #111827; text-decoration: underline; text-underline-offset: 3px; } .slFlipCard.theme-profile-saved .slBack .slLink{ color: rgba(255,255,255,.92); text-decoration: underline; text-underline-offset: 3px; } .slFlipCard.theme-profile-saved .slBack .slShowMore{ background: rgba(255,255,255,.92); color:#111827; border-color: rgba(255,255,255,.18); } .slFlipCard.theme-profile-saved .slBack .slShowMore:hover{ background: rgba(255,255,255,.98); }