/* ================================================================================ RukPay — BASE STYLES for "Mint Fresh (Light)" ================================================================================ Developer : Mayank Chawdhari ( BOSS 294 ) Version : 1.0.0 Released : 2025-11-11 License : © Rukmani Graphics / RukPay™ — All rights reserved. DOCUMENTATION ------------- This CSS file is a single-source-of-truth *base stylesheet* for the "Mint Fresh (Light)" RukPay theme. It contains: • All default CSS custom properties (tokens) in :root • Button system (primary / outline / ghost / pill / danger / success) • Input / form controls styles • Surface components (card, panel) • Modal / toaster minimal styles • Micro animations, focus / hover / active "after" effects HOW TO USE ---------- 1) Add this file to your project (e.g. ) 2) Ensure the page background stays consistent with the theme -- the tokens below assume a light canvas: background: var(--bg); 3) Use semantic classes:

...

4) To change colors, override the tokens in a scope (e.g. body[data-theme="mintfresh"]) or edit below. ACCESSIBILITY NOTES ------------------- • All interactive controls use :focus-visible to present a high-contrast focus ring. • Buttons have at least 44x44 tappable size by default. • Use aria-live="polite" on the toaster container for screen-reader announcements. TRADEMARKING ------------ RukPay™ and Rukmani Graphics™ are trademarks of their respective owners. This stylesheet is provided for RukPay demo projects. Redistribution is subject to license. CHANGELOG --------- 1.0.0 - Initial release: tokens, buttons, controls, modals, toasts, utilities. ================================================================================ */ /* ========================================================================== */ /* --------------------------- THEME TOKENS (Mint Fresh) --------------------- */ /* ========================================================================== */ :root{ /* branding */ --brand-name: "RukPay"; --version: "1.0.0"; --developer: "Mayank Chawdhari (BOSS 294)"; /* typography */ --font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; --font-family-ui: var(--font-family-sans); --font-size-root: 16px; --text: #052014; /* body text */ --muted: rgba(5,32,20,0.45); --inverse-text: #ffffff; /* canvas */ --bg: #fbfff7; /* page background */ --surface: #ffffff; /* primary panel / cards */ --surface-2: #f6fbf6; /* subtle elevated surface */ --panel-bg: rgba(2,6,23,0.02); --glass: rgba(5,32,20,0.02); --card-border: rgba(5,32,20,0.06); /* primary / accent colors (Mint Fresh) */ --primary: #34d399; /* main brand */ --secondary: #10b981; /* darker mint */ --accent: #6ee7b7; /* light accent */ --success: #10b981; --danger: #ef4444; --warning: #f59e0b; /* semantic contrast for text on primary */ --on-primary: #052014; /* dark text on light green buttons */ /* shadows & radii */ --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --shadow-1: 0 6px 18px rgba(6,22,14,0.06); --shadow-2: 0 14px 40px rgba(6,22,14,0.08); --elev: rgba(6,22,14,0.06); /* transitions */ --ease: cubic-bezier(.2,.9,.2,1); --fast: 160ms; --med: 260ms; --slow: 420ms; /* button ripple color (rgb) - used by CSS radial gradient */ --ripple-rgb: 52,211,153; /* primary in rgb */ /* sizing */ --control-height: 44px; --control-padding: 12px 16px; /* utilities */ --max-width: 1500px; } /* ========================================================================== */ /* ------------------------------ BASE LAYOUT --------------------------------*/ /* ========================================================================== */ *{box-sizing:border-box} html{font-size:var(--font-size-root)} body{ margin:0;padding:0;font-family:var(--font-family-ui);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } img{max-width:100%;height:auto;display:block} .container{max-width:var(--max-width);margin:0 auto;padding:24px} /* surfaces */ .surface{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1);border:1px solid var(--card-border);padding:16px} .surface-lg{background:var(--surface-2);padding:20px} .card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1);border:1px solid var(--card-border);padding:14px} .panel{background:linear-gradient(180deg,var(--surface),var(--surface-2));border-radius:var(--radius-lg);padding:18px;border:1px solid var(--card-border);box-shadow:var(--shadow-2)} .h1{font-size:20px;margin:0 0 6px 0} .lead{color:var(--muted);margin:0 0 12px 0} /* layout helpers */ .row{display:flex;gap:12px;align-items:center} .col{display:flex;flex-direction:column} .spacer{height:12px} /* ========================================================================== */ /* ------------------------------ BUTTON SYSTEM ------------------------------*/ /* ========================================================================== */ /* Usage examples: */ .btn{ position:relative; /* for ripple pseudo */ display:inline-flex;align-items:center;justify-content:center;gap:10px; height:var(--control-height); padding:var(--control-padding); border-radius:10px;font-weight:700;cursor:pointer;border:0;overflow:hidden;user-select:none; transition:transform var(--fast) var(--ease),box-shadow var(--med) var(--ease),opacity var(--fast); background:transparent;color:var(--text); min-width:88px;padding-left:16px;padding-right:16px; } /* ripple pseudo-element (centered by default) */ .btn::after{ content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);width:300%;height:300%;border-radius:50%;opacity:0;pointer-events:none; background:radial-gradient(circle at center, rgba(var(--ripple-rgb),0.18) 0%, rgba(var(--ripple-rgb),0.06) 10%, rgba(var(--ripple-rgb),0.00) 40%); transition:opacity .36s var(--ease), transform .36s var(--ease); } .btn:active::after{opacity:1;transform:translate(-50%,-50%) scale(1)} /* Focus styles - only show for keyboard navigation (focus-visible) */ .btn:focus{outline: none} .btn:focus-visible{box-shadow:0 0 0 4px rgba(52,211,153,0.12);outline: none} /* Hover & active micro-interaction */ .btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(6,22,14,0.08)} .btn:active{transform:translateY(1px) scale(.995)} /* primary (solid) */ .btn--primary{ background:linear-gradient(90deg,var(--primary),var(--secondary)); color:var(--on-primary);box-shadow:0 12px 36px rgba(16,185,129,0.12); } .btn--primary:hover{filter:brightness(1.03);} /* outline */ .btn--outline{background:transparent;border:1px solid color-mix(in srgb,var(--primary) 14%, transparent);color:var(--text)} .btn--outline:hover{background:linear-gradient(180deg, rgba(16,185,129,0.02), rgba(16,185,129,0.01))} /* ghost */ .btn--ghost{background:transparent;color:var(--primary);border:1px solid transparent} .btn--ghost:hover{background:linear-gradient(180deg, rgba(5,32,20,0.02), transparent);} /* pill */ .btn--pill{border-radius:999px;padding-left:18px;padding-right:18px} /* danger / success */ .btn--danger{background:linear-gradient(90deg,var(--danger), color-mix(in srgb,var(--danger) 80%, rgba(0,0,0,0.04)));color:#fff} .btn--success{background:linear-gradient(90deg,var(--success), color-mix(in srgb,var(--success) 60%, rgba(0,0,0,0.04)));color:var(--on-primary)} /* disabled */ .btn[disabled], .btn.is-disabled{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none} /* loading state helper */ .btn--loading{pointer-events:none;opacity:.9} .btn--loading::before{content:'';width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,0.18);border-top-color:rgba(255,255,255,0.6);position:absolute;left:12px} /* ========================================================================== */ /* --------------------------- FORM CONTROLS --------------------------------*/ /* ========================================================================== */ .field{display:flex;flex-direction:column;gap:6px} label{font-size:13px;color:var(--muted)} .input{ height:var(--control-height);padding:10px 12px;border-radius:10px;border:1px solid var(--card-border);background:transparent;color:var(--text);outline:none;transition:box-shadow var(--fast) var(--ease),border-color var(--fast) var(--ease) } .input:focus{box-shadow:0 8px 28px rgba(6,22,14,0.04);border-color:color-mix(in srgb,var(--primary) 34%, black)} .select{height:var(--control-height);padding:8px 12px;border-radius:10px;border:1px solid var(--card-border);background:transparent;color:var(--text)} /* small helper text */ .helper{font-size:13px;color:var(--muted)} /* ========================================================================== */ /* ------------------------------- CARDS ------------------------------------*/ /* ========================================================================== */ .card-compact{padding:10px;border-radius:10px} .card-hero{padding:22px;border-radius:16px;background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:var(--shadow-2)} .card-muted{background:linear-gradient(180deg,var(--panel-bg),transparent);border-radius:12px;padding:12px;border:1px solid var(--card-border)} /* ========================================================================== */ /* ------------------------------ MODAL & TOAST ------------------------------*/ /* ========================================================================== */ /* modal (light, centered) */ .modal-backdrop{position:fixed;inset:0;background:rgba(5,32,20,0.06);display:flex;align-items:center;justify-content:center;z-index:3000;padding:24px} .modal{width:480px;max-width:calc(100% - 40px);background:var(--surface);border-radius:12px;padding:18px;border:1px solid var(--card-border);box-shadow:var(--shadow-2)} .modal h3{margin:0 0 6px 0} /* toaster */ .toaster{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:4000} .toast{min-width:260px;padding:12px 14px;border-radius:10px;background:linear-gradient(90deg, color-mix(in srgb,var(--panel-bg) 80%, transparent), color-mix(in srgb,var(--panel-bg) 72%, transparent));border:1px solid var(--card-border);box-shadow:var(--shadow-1)} .toast .title{font-weight:800} .toast.success{border-left:4px solid var(--success)} .toast.error{border-left:4px solid var(--danger)} /* ========================================================================== */ /* ---------------------------- THEME SWATCH / FAB ---------------------------*/ /* ========================================================================== */ .theme-fab{position:fixed;right:18px;bottom:18px;z-index:2200;display:flex;flex-direction:column;align-items:center;gap:8px} .theme-fab .label{background:linear-gradient(180deg,var(--panel-bg),color-mix(in srgb,var(--panel-bg) 80%, transparent));padding:8px 12px;border-radius:10px;border:1px solid var(--card-border);font-weight:700;color:var(--muted)} .theme-fab button{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--secondary));border:none;color:var(--on-primary);font-weight:900;box-shadow:var(--shadow-2);cursor:pointer} /* theme swatch */ .theme-swatch{height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--card-border);display:flex;flex-direction:column} .theme-swatch .swatch-top{flex:1} .theme-swatch .swatch-bottom{background:var(--surface);font-size:12px;padding:6px;text-align:center;color:var(--muted)} /* ========================================================================== */ /* ------------------------------- UTILITIES --------------------------------*/ /* ========================================================================== */ .text-muted{color:var(--muted)} .text-strong{font-weight:800;color:var(--text)} .flex{display:flex} .center{display:flex;align-items:center;justify-content:center} .p-12{padding:12px} .mt-12{margin-top:12px} /* ========================================================================== */ /* ------------------------------ CUSTOMIZATION -----------------------------*/ /* ========================================================================== */ /* If you want to adapt this base to another tone: - Override tokens in a scope, e.g. body[data-theme="mintfresh"] { --primary: #...; --bg: #...; } - Prefer token overrides over editing component rules. Example minimal override in a page: */ /* ========================================================================== */ /* END OF FILE */ /* ========================================================================== */