/* ICR Pedigree – Clean theme stylesheet (scoped) Usage (to avoid conflicts): Add class="theme-icr" to (or to your top wrapper). */ :root{ /* Backgrounds */ --icr-bg:#0f5132; /* Deep mosque green */ --icr-bg-2:#0a3d2a; /* Dark emerald */ --icr-bg-3:#06281c; /* Deep night green */ /* Text */ --icr-text:#f8f9f3; /* Soft ivory */ --icr-accent:rgba(201,162,39,1); /* Elegant islamic gold */ /* Hover */ --icr-hover:#1fa97a; /* Fresh festive green */ --icr-gold: rgba(212,175,55,1); /* Light gold */ --icr-light-gold: rgba(255, 220, 115, 1); --icr-soft-gold: rgba(255, 215, 160, 0.7); --icr-pure-gold: #ffd700; --icr-warm-gold: #e6c86e; /* Warm Champagne gold */ /* --icr-standard-gold: rgba(255, 215, 0, 1); */ /* Standard gold */ /* --icr-metallic-gold: rgba(239, 191, 4, 1); */ /* Metallic Gold */ /* --icr-dark-gold: rgba(166, 124, 0, 1); */ /* Dark gold */ --icr-platinum: #e8e8e8; --icr-light-green: #00A651; --icr-green: #0f7a2a; --icr-dark-green: rgba(11, 90, 42, 1); --icr-neon-green: #00FF19; --fb-blue:var(--icr-platinum); --fb-blue-brand:rgba(66,103,178,1); --insta-pink:var(--icr-platinum); --insta-pink-brand:rgba(214,41,118,1); --art-red:rgba(255,0,0,1); --icr-red: #b30000; --icr-red-2: #8b0000; --icr-dark-red: #7a0000; --icr-pink: #2bbf9b; /* Soft festive teal */ --icr-light-black: #1a1a1a; --icr-black: black; --icr-light-ivory: #d9d4c5; --icr-ivory: #f3f1e7; --icr-white: #f8f6ee; /* Soft ivory white */ --icr-royal-purple: rgba(107, 78, 255, 1); --icr-dark-purple: rgba(107, 78, 255, .15); --icr-light-purple: rgba(107, 78, 255, .85); --icr-purple-tertiary: rgba(107, 78, 255, .25); --icr-purple-border: rgba(107, 78, 255, .5); --icr-yellow: yellow; --icr-border:rgba(255,220,115,.85); --icr-button-border:rgba(255,220,115,.85); --icr-secondary-border-color: rgba(255,215,0,.25); /* Subtle / Secondary text */ --icr-muted:rgba(224, 210, 170, .65); /* Soft warm gold-beige */ /* Disabled state */ --icr-disabled:rgba(18, 56, 40, .45); /* Muted deep green */ /* Focus ring / highlight */ --icr-focus:rgba(201, 162, 39, .85); /* Elegant Islamic gold */ /* Headings */ --icr-heading:#f8f6ee; /* Clean ivory white */ /* Shadows */ --icr-box-shadow: rgba(201,162,39,.28); /* Soft gold glow */ --icr-text-box-shadow: rgba(201,162,39,.38); /* Subtle highlight */ --icr-text-shadow: rgba(0,0,0,.75); /* DANGER (lebih refined, tidak terlalu pink) */ --icr-danger: #ffe5e5; --icr-danger-soft: rgba(183, 40, 40, .12); --icr-danger-border: rgba(183, 40, 40, .45); /* WARNING (gold-amber harmony) */ --icr-warning: #c9a227; /* Islamic gold */ --icr-light-warning: #e6c76e; --icr-warning-soft: rgba(201,162,39,.15); --icr-warning-border: rgba(201,162,39,.65); /* SUCCESS (emerald tone, match theme) */ --icr-success: #2f8f5b; --icr-success-soft: rgba(47,143,91,.15); --icr-success-border: rgba(47,143,91,.45); /* LIGHT (clean fitri feel) */ --icr-light: #f4f6f2; --icr-light-soft: rgba(255,255,255,.10); --icr-light-border: rgba(255,255,255,.25); /* MUTED */ --icr-muted-text: rgba(232, 220, 185, .75); --icr-muted-border: rgba(201,162,39,.45); --icr-muted-soft: rgba(201,162,39,.10); /* DARK overlays */ --icr-dark-text: rgba(255,255,255,.88); --icr-dark-border: rgba(201,162,39,.35); --icr-dark-soft: rgba(201,162,39,.15); /* PRIMARY – Ramadhan Elegant Gold */ --icr-primary: rgba(201,162,39,1); /* Islamic gold */ --icr-primary-soft: rgba(201,162,39,.16); --icr-primary-ring: rgba(201,162,39,.32); --mobile-width: 768px; --chat-width: 576px; } /* Global */ body.theme-icr{ background: var(--icr-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23c9a227' stroke-opacity='.18' stroke-width='2'%3E%3Cpath d='M120 10 L150 70 L210 80 L165 125 L175 185 L120 155 L65 185 L75 125 L30 80 L90 70 Z'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat; background-size: 240px 240px; background-position: center; color: var(--icr-text); font-size: .9rem; } @media (max-width: var(--mobile-width)){ body.theme-icr{ background-size: 320px 320px, auto; } } body.theme-icr .fs-1{ font-size: 2rem !important; /* 32px */ line-height: 1.2 !important; } body.theme-icr .fs-2{ font-size: 1.75rem !important; /* 28px */ line-height: 1.2 !important; } body.theme-icr .fs-3{ font-size: 1.5rem !important; /* 24px */ line-height: 1.2 !important; } body.theme-icr .fs-4{ font-size: 1.25rem !important; /* 20px */ line-height: 1.15 !important; } body.theme-icr .fs-5{ font-size: 1.1rem !important; /* 17.6px */ line-height: 1.15 !important; } body.theme-icr .fs-6{ font-size: .95rem !important; /* 15.2px */ line-height: 1.15 !important; } body.theme-icr .fs-7{ font-size: .85rem !important; /* 13.6px */ line-height: 1.1 !important; } /* Links */ body.theme-icr a{ color: var(--icr-accent); text-decoration: none; font-weight: 500; transition: all .2s ease; } body.theme-icr a:hover{ color: var(--icr-white); text-decoration: none; text-shadow: 0 0 6px var(--icr-primary-soft); } /* Header / navbar base */ body.theme-icr .web-heading, body.theme-icr .top-navbar, body.theme-icr .nav-bg, body.theme-icr header{ color: var(--icr-text); border-bottom: 1px solid var(--icr-border); box-shadow: 0 6px 18px rgba(0,0,0,.22); } /* Main nav */ body.theme-icr header .icr-mainnav{ background-color: var(--icr-bg-2); border-top: 1px solid var(--icr-border); position: relative; z-index: 1020; /* subtle festive highlight line (gold) */ box-shadow: inset 0 1px 0 rgba(201,162,39,.18), 0 10px 28px rgba(0,0,0,.25); backdrop-filter: saturate(110%); } /* Keep collapse above content */ body.theme-icr header .navbar .collapse{ z-index: 1020; } /* Optional: nav links look */ body.theme-icr header .navbar a, body.theme-icr header .navbar .nav-link{ color: rgba(248,246,238,.88); transition: color .2s ease, background-color .2s ease; } body.theme-icr header .navbar a:hover, body.theme-icr header .navbar .nav-link:hover{ color: var(--icr-white); } /* Optional: active state */ body.theme-icr header .navbar .nav-link.active{ color: var(--icr-white); border-bottom: 2px solid var(--icr-accent); } /* Right alignment helper (use one of these classes on the right container) */ body.theme-icr .nav-top-right, body.theme-icr .top-navbar-right, body.theme-icr .header-right{ margin-left:auto !important; display:flex !important; align-items:center !important; gap:1rem !important; flex-wrap:nowrap !important; white-space:nowrap !important; } /* Nav links */ body.theme-icr .nav-theme{ color: var(--icr-accent); transition: color .2s ease; } body.theme-icr .nav-theme:hover{ color: var(--icr-primary); } /* Theme headings */ body.theme-icr h1.text-theme, body.theme-icr h2.text-theme, body.theme-icr h3.text-theme, body.theme-icr h4.text-theme, body.theme-icr h5.text-theme{ color: var(--icr-heading); } /* Accent text */ body.theme-icr .text-theme{ color: var(--icr-accent); } /* Detail label (dt) */ body.theme-icr .canine-detail-list dt{ color: var(--icr-primary); font-weight: 600; } /* Core Accent */ .text-accent { color: var(--icr-accent) !important; } .text-muted { color: var(--icr-muted) !important; } .text-white { color: var(--icr-white) !important; } .text-black { color: rgba(0,0,0,.85) !important; } /* Brand Tone */ .text-gold { color: var(--icr-accent) !important; } .text-green { color: var(--icr-primary) !important; } .text-ivory { color: var(--icr-heading) !important; } /* Semantic States */ .text-danger { color: var(--icr-danger) !important; } .text-success { color: var(--icr-success) !important; } .text-warning { color: var(--icr-warning) !important; } .text-info { color: var(--icr-primary) !important; } .text-pink { color: var(--icr-pink) !important; } .text-red { color: var(--icr-danger) !important; } .text-yellow { color: var(--icr-warning) !important; } .text-fb-blue { color: var(--fb-blue) !important; } .text-fb-blue:hover{ color: var(--icr-hover) !important; } .text-insta-pink { color: var(--insta-pink) !important; } .text-insta-pink:hover{ color: var(--icr-hover) !important; } .text-art-red { color: var(--art-red) !important; } .text-nowrap { white-space: nowrap; } .canine-name{ color: var(--icr-accent); /* Elegant gold */ font-weight: 600; } .date{ color: var(--icr-muted); /* Soft muted gold-beige */ font-size: 0.75rem; } .desc{ color: var(--icr-primary); /* Emerald for structure */ font-size: 0.9rem; font-weight: 500; } /* Divider */ body.theme-icr hr{ border: none; height: 1px; background: linear-gradient( to right, transparent, var(--icr-border), transparent ); opacity: .6; margin: 1.5rem 0; } /* Themed border */ body.theme-icr .border-theme{ border: 1px solid var(--icr-border) !important; } /* === Theme buttons (primary) === */ body.theme-icr button.btn:has(> i:only-child){ width: 40px; height: 40px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: .6rem; } body.theme-icr button.btn i:hover{ transform: translateY(-1px); } body.theme-icr .button-theme i, body.theme-icr .button-outline-theme i { margin: 0; padding: 0; } body.theme-icr .bg-theme, body.theme-icr a.button-theme, body.theme-icr button.button-theme{ background: var(--icr-accent) !important; /* gold */ color: rgba(0,0,0,.88) !important; border: 1px solid rgba(201,162,39,.85) !important; border-radius: .6rem; padding: .45rem .85rem !important; font-weight: 600 !important; letter-spacing: .2px; box-shadow: 0 4px 12px rgba(0,0,0,.35); transition: background .15s ease, box-shadow .15s ease, color .15s ease, transform .05s ease, border-color .15s ease; } body.theme-icr a.button-theme:hover, body.theme-icr button.button-theme:hover{ background: rgba(230,199,110,1) !important; /* softer lantern gold */ color: rgba(0,0,0,.90) !important; border-color: rgba(230,199,110,.95) !important; box-shadow: 0 0 0 .16rem var(--icr-primary-ring), 0 8px 18px rgba(0,0,0,.45); text-decoration: none; transform: translateY(-1px); } body.theme-icr a.button-theme:active, body.theme-icr button.button-theme:active{ transform: translateY(0); background: rgba(201,162,39,1) !important; /* back to gold */ border-color: rgba(201,162,39,.95) !important; color: rgba(0,0,0,.90) !important; box-shadow: 0 2px 6px rgba(0,0,0,.45) inset; } /* Remove focus glow */ body.theme-icr .user-dropdown, body.theme-icr .dropdown-toggle{ outline:none !important; } body.theme-icr .user-dropdown:focus, body.theme-icr .dropdown-toggle:focus, body.theme-icr button:focus, body.theme-icr a:focus{ outline:none !important; box-shadow:none !important; } /* === Theme buttons (secondary) === */ body.theme-icr button.button-theme-secondary{ background: linear-gradient( 180deg, rgba(47,143,91,1), rgba(31,111,79,1) ) !important; border: 1px solid rgba(31,111,79,.9); color: var(--icr-white) !important; box-shadow: 0 6px 14px rgba(0,0,0,.4); border-radius: .6rem; padding: .45rem .85rem !important; font-weight: 600 !important; letter-spacing: .2px; transition: all .15s ease; } body.theme-icr button.button-theme-secondary:hover{ background: var(--icr-success-soft) !important; color: var(--icr-white) !important; border-color: rgba(47,143,91,.95) !important; box-shadow: 0 0 0 .16rem rgba(47,143,91,.28), 0 6px 14px rgba(0,0,0,.45); transform: translateY(-1px); } body.theme-icr button.button-theme-secondary:active{ transform: translateY(0); background: rgba(31,111,79,.25) !important; box-shadow: 0 2px 4px rgba(0,0,0,.45) inset; } body.theme-icr a.button-outline-theme, body.theme-icr button.button-outline-theme{ background: transparent !important; color: var(--icr-accent) !important; border: 1px solid rgba(201,162,39,.85) !important; border-radius: .6rem; padding: .45rem .85rem !important; font-weight: 600 !important; letter-spacing: .2px; transition: background .15s ease, box-shadow .15s ease, color .15s ease, transform .05s ease, border-color .15s ease; } body.theme-icr a.button-outline-theme:hover, body.theme-icr button.button-outline-theme:hover{ background: var(--icr-primary-soft) !important; /* soft emerald wash */ color: var(--icr-white) !important; border-color: rgba(201,162,39,.95) !important; box-shadow: 0 0 0 .16rem var(--icr-primary-ring), 0 6px 14px rgba(0,0,0,.45); transform: translateY(-1px); } body.theme-icr a.button-outline-theme:active, body.theme-icr button.button-outline-theme:active{ transform: translateY(0); background: rgba(31,111,79,.22) !important; box-shadow: 0 0 0 .12rem rgba(201,162,39,.22), 0 2px 4px rgba(0,0,0,.35) inset; } /* === Theme button tertiary (Ramadhan) === */ body.theme-icr button.button-theme-tertiary{ background: rgba(47,143,91,.18) !important; border: 1px solid rgba(47,143,91,.5) !important; color: var(--icr-success) !important; box-shadow: none; border-radius: .6rem; letter-spacing: .2px; padding: .45rem .85rem !important; font-weight: 600 !important; transition: background .15s ease, box-shadow .15s ease, color .15s ease, transform .05s ease, border-color .15s ease; } body.theme-icr button.button-theme-tertiary:hover{ background: rgba(47,143,91,.35) !important; color: var(--icr-white) !important; border-color: rgba(47,143,91,.85) !important; box-shadow: 0 0 0 .16rem rgba(47,143,91,.25); transform: translateY(-1px); } body.theme-icr button.button-theme-tertiary:active{ transform: translateY(0); background: rgba(10,61,42,.85) !important; border-color: rgba(201,162,39,.40) !important; box-shadow: 0 2px 5px rgba(0,0,0,.45) inset; } /* === Button Info === */ body.theme-icr .button-theme-info{ background: linear-gradient( 180deg, rgba(31,111,79,1) 0%, rgba(20,87,61,1) 100% ); color: var(--icr-white) !important; border: 1px solid rgba(31,111,79,.9); font-weight: 600; letter-spacing: .2px; border-radius: 8px; padding: .45rem .85rem; transition: all .2s ease; box-shadow: 0 3px 8px rgba(0,0,0,.35); } body.theme-icr .button-theme-info:hover{ background: linear-gradient( 180deg, rgba(46,143,91,1) 0%, rgba(31,111,79,1) 100% ); border-color: rgba(46,143,91,1); box-shadow: 0 0 0 .16rem var(--icr-focus), 0 6px 14px rgba(0,0,0,.45); transform: translateY(-1px); } body.theme-icr .button-theme-info:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.4) inset; } /* Outline */ body.theme-icr .button-outline-theme-info{ background: transparent; color: var(--icr-primary); border: 1px solid rgba(31,111,79,.7) !important; border-radius: .6rem; letter-spacing: .2px; padding: .45rem .85rem; font-weight: 600; transition: all .18s ease; } body.theme-icr .button-outline-theme-info:hover{ background: var(--icr-primary-soft) !important; color: var(--icr-white) !important; border-color: rgba(31,111,79,.9) !important; box-shadow: 0 0 0 .14rem var(--icr-primary-ring), 0 4px 12px rgba(0,0,0,.45); transform: translateY(-1px); } body.theme-icr .button-outline-theme-info:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.45) inset; } /* === Button Warning === */ body.theme-icr .button-theme-warning{ background: linear-gradient( 180deg, rgba(201,162,39,1) 0%, rgba(170,135,30,1) 100% ); color: rgba(0,0,0,.9) !important; border: 1px solid rgba(201,162,39,.9); font-weight: 600; letter-spacing: .2px; border-radius: .6rem; padding: .45rem .85rem; transition: all .2s ease; box-shadow: 0 3px 8px rgba(0,0,0,.35); } body.theme-icr .button-theme-warning:hover{ background: linear-gradient( 180deg, rgba(230,199,110,1) 0%, rgba(201,162,39,1) 100% ); border-color: rgba(230,199,110,1); box-shadow: 0 0 0 .16rem var(--icr-primary-ring), 0 6px 14px rgba(0,0,0,.45); transform: translateY(-1px); } body.theme-icr .button-theme-warning:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.4) inset; } /* Outline */ body.theme-icr .button-outline-theme-warning{ background: transparent; border: 1px solid var(--icr-accent); border-radius: .6rem; color: var(--icr-accent); letter-spacing: .2px; padding: .45rem .85rem; font-weight: 600; transition: all .18s ease; } body.theme-icr .button-outline-theme-warning:hover{ background: linear-gradient( 180deg, #e6c15c, #b89028 ); color: #1b1206; box-shadow: 0 6px 14px rgba(0,0,0,.45), 0 0 12px rgba(201,162,39,.35); transform: translateY(-1px); } body.theme-icr .button-outline-theme-warning:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.45) inset; } /* === Button Success === */ body.theme-icr .button-theme-success{ background: linear-gradient( 180deg, rgba(47,143,91,1) 0%, rgba(31,111,79,1) 100% ); color: var(--icr-white) !important; border: 1px solid rgba(47,143,91,.9); font-weight: 600; letter-spacing: .2px; border-radius: .6rem; padding: .45rem .85rem; transition: all .2s ease; box-shadow: 0 3px 8px rgba(0,0,0,.35); } body.theme-icr .button-theme-success:hover{ background: linear-gradient( 180deg, rgba(63,167,106,1) 0%, rgba(47,143,91,1) 100% ); border-color: rgba(63,167,106,1); box-shadow: 0 0 0 .16rem var(--icr-focus), 0 6px 14px rgba(0,0,0,.45); transform: translateY(-1px); } body.theme-icr .button-theme-success:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.4) inset; } /* Outline */ body.theme-icr .button-outline-theme-success{ background: transparent; color: var(--icr-success); border: 1px solid var(--icr-success) !important; border-radius: .6rem; letter-spacing: .2px; padding: .45rem .85rem; font-weight: 600; transition: all .18s ease; } body.theme-icr .button-outline-theme-success:hover{ background: var(--icr-success-soft) !important; color: var(--icr-white) !important; border-color: var(--icr-success) !important; box-shadow: 0 0 0 .14rem var(--icr-primary-ring), 0 4px 12px rgba(0,0,0,.45); transform: translateY(-1px); } body.theme-icr .button-outline-theme-success:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.45) inset; } /* === Button Danger === */ body.theme-icr .button-theme-danger{ background: linear-gradient( 180deg, rgba(183,40,40,1) 0%, rgba(140,25,25,1) 100% ); color: var(--icr-white) !important; border: 1px solid rgba(183,40,40,.9); font-weight: 600; letter-spacing: .2px; border-radius: .6rem; padding: .45rem .85rem; transition: all .2s ease; box-shadow: 0 3px 8px rgba(0,0,0,.35); } body.theme-icr .button-theme-danger:hover{ background: linear-gradient( 180deg, rgba(210,60,60,1) 0%, rgba(183,40,40,1) 100% ); border-color: rgba(210,60,60,1); box-shadow: 0 0 0 .16rem rgba(183,40,40,.35), 0 6px 14px rgba(0,0,0,.45); transform: translateY(-1px); } body.theme-icr .button-theme-danger:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.4) inset; } /* Outline */ body.theme-icr .button-outline-theme-danger{ background: transparent; color: var(--icr-danger); border: 1px solid var(--icr-danger) !important; border-radius: .6rem; letter-spacing: .2px; padding: .45rem .85rem; font-weight: 600; transition: all .18s ease; } body.theme-icr .button-outline-theme-danger:hover{ background: var(--icr-danger-soft) !important; color: var(--icr-white) !important; border-color: var(--icr-danger) !important; box-shadow: 0 0 0 .14rem rgba(183,40,40,.25), 0 4px 12px rgba(0,0,0,.45); transform: translateY(-1px); } body.theme-icr .button-outline-theme-danger:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.45) inset; } /* === button light === */ /* === Button Light === */ body.theme-icr .button-theme-light{ background: linear-gradient( 180deg, #f8f6ee 0%, #ece8da 100% ); color: rgba(0,0,0,.85) !important; border: 1px solid rgba(201,162,39,.35); font-weight: 600; letter-spacing: .2px; border-radius: .6rem; padding: .45rem .85rem; transition: all .2s ease; box-shadow: 0 3px 8px rgba(0,0,0,.25); } body.theme-icr .button-theme-light:hover{ background: #ffffff; border-color: rgba(201,162,39,.55); box-shadow: 0 0 0 .14rem var(--icr-primary-ring), 0 6px 14px rgba(0,0,0,.35); transform: translateY(-1px); } body.theme-icr .button-theme-light:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.35) inset; } /* Outline */ body.theme-icr .button-outline-theme-light{ background: transparent; color: var(--icr-heading); border: 1px solid rgba(255,255,255,.35) !important; border-radius: .6rem; letter-spacing: .2px; padding: .45rem .85rem; font-weight: 600; transition: all .18s ease; } body.theme-icr .button-outline-theme-light:hover{ background: rgba(255,255,255,.08) !important; color: var(--icr-white) !important; border-color: rgba(255,255,255,.55) !important; box-shadow: 0 0 0 .12rem rgba(255,255,255,.15), 0 4px 12px rgba(0,0,0,.35); transform: translateY(-1px); } body.theme-icr .button-outline-theme-light:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.35) inset; } /* === Button Muted === */ body.theme-icr .button-theme-muted{ background: rgba(255,255,255,.05) !important; color: rgba(232,220,185,.6) !important; border: 1px solid rgba(232,220,185,.18) !important; font-weight: 600; letter-spacing: .2px; border-radius: .6rem; padding: .45rem .85rem; transition: all .2s ease; box-shadow: 0 2px 6px rgba(0,0,0,.25); } body.theme-icr .button-theme-muted:hover{ background: rgba(255,255,255,.08) !important; color: rgba(232,220,185,.85) !important; border-color: rgba(232,220,185,.35) !important; box-shadow: 0 0 0 .14rem var(--icr-primary-ring), 0 4px 10px rgba(0,0,0,.35); transform: translateY(-1px); } body.theme-icr .button-theme-muted:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.35) inset; } /* Outline */ body.theme-icr .button-outline-theme-muted{ background: transparent; color: rgba(232,220,185,.45) !important; /* lebih redup */ border: 1px solid rgba(232,220,185,.18) !important; border-radius: .6rem; letter-spacing: .2px; padding: .45rem .85rem; font-weight: 600; transition: all .18s ease; } body.theme-icr .button-outline-theme-muted:hover{ color: rgba(232,220,185,.75) !important; border-color: rgba(232,220,185,.35) !important; background: rgba(255,255,255,.03) !important; box-shadow: 0 0 0 .12rem rgba(201,162,39,.18), 0 4px 10px rgba(0,0,0,.35); transform: translateY(-1px); } body.theme-icr .button-outline-theme-muted:active{ transform: translateY(0); background: rgba(255,255,255,.02) !important; } /* === Button Dark === */ body.theme-icr .button-theme-dark{ background: linear-gradient( 180deg, rgba(10,40,30,1) 0%, rgba(5,25,20,1) 100% ); color: var(--icr-white) !important; border: 1px solid rgba(201,162,39,.35); font-weight: 600; letter-spacing: .2px; border-radius: .6rem; padding: .45rem .85rem; transition: all .2s ease; box-shadow: 0 3px 8px rgba(0,0,0,.45); } body.theme-icr .button-theme-dark:hover{ background: linear-gradient( 180deg, rgba(20,61,45,1) 0%, rgba(10,40,30,1) 100% ); border-color: rgba(201,162,39,.55); box-shadow: 0 0 0 .14rem var(--icr-primary-ring), 0 6px 14px rgba(0,0,0,.55); transform: translateY(-1px); } body.theme-icr .button-theme-dark:active{ transform: translateY(0); box-shadow: 0 2px 5px rgba(0,0,0,.5) inset; } /* Outline */ /* === Button Outline Dark === */ body.theme-icr .button-outline-theme-dark{ background: transparent; color: rgba(10,40,30,1); border: 1px solid rgba(10,40,30,.75) !important; border-radius: .6rem; padding: .45rem .85rem; font-weight: 600; letter-spacing: .2px; transition: all .18s ease; } body.theme-icr .button-outline-theme-dark:hover{ background: rgba(10,40,30,.08) !important; color: rgba(5,25,20,1) !important; border-color: rgba(10,40,30,.95) !important; box-shadow: 0 0 0 .14rem rgba(10,40,30,.18), 0 4px 12px rgba(0,0,0,.35); transform: translateY(-1px); } body.theme-icr .button-outline-theme-dark:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.35) inset; } /* === button primary === */ body.theme-icr .button-theme-primary{ background: linear-gradient( 180deg, rgba(31,111,79,1) 0%, rgba(20,87,61,1) 100% ); color: var(--icr-white) !important; border: 1px solid rgba(31,111,79,.9); font-weight: 600; letter-spacing: .2px; border-radius: .6rem; padding: .5rem .9rem; transition: all .2s ease; box-shadow: 0 4px 12px rgba(0,0,0,.35); } body.theme-icr .button-theme-primary:hover{ background: linear-gradient( 180deg, rgba(46,143,91,1) 0%, rgba(31,111,79,1) 100% ); border-color: rgba(46,143,91,1); box-shadow: 0 0 0 .18rem var(--icr-focus), /* subtle gold ring */ 0 6px 16px rgba(0,0,0,.45); transform: translateY(-1px); } body.theme-icr .button-theme-primary:active{ transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.45) inset; } /* Outline */ body.theme-icr .button-outline-theme-primary{ background: transparent; color: var(--icr-primary); border: 1px solid var(--icr-primary) !important; border-radius: .6rem; padding: .5rem .9rem; font-weight: 600; letter-spacing: .2px; transition: all .18s ease; } body.theme-icr .button-outline-theme-primary:hover{ background: var(--icr-primary) !important; color: var(--icr-white) !important; box-shadow: 0 0 0 .16rem var(--icr-primary-ring), 0 6px 16px rgba(0,0,0,.45); transform: translateY(-1px); } body.theme-icr .button-outline-theme-primary:active{ transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.45) inset; } /* === PAGINATION === */ /* Container */ body.theme-icr .pagination{ gap: .2rem; /* jarak antar item */ } /* Anchor as button */ /* === Pagination Base === */ body.theme-icr .pagination a.button-theme{ background: rgba(10,40,30,.75) !important; color: var(--icr-heading) !important; border: 1px solid rgba(201,162,39,.25) !important; border-radius: .6rem !important; min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .75rem !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: 0 2px 6px rgba(0,0,0,.25) !important; transition: all .18s ease; } /* Hover */ body.theme-icr .pagination a.button-theme:hover{ background: var(--icr-primary) !important; color: var(--icr-white) !important; border-color: var(--icr-primary) !important; box-shadow: 0 4px 10px rgba(0,0,0,.35) !important; transform: translateY(-1px); } /* Active page */ body.theme-icr .pagination li.active a.button-theme{ background: var(--icr-accent) !important; color: rgba(0,0,0,.9) !important; border-color: var(--icr-accent) !important; box-shadow: 0 3px 8px rgba(0,0,0,.4) inset !important; } /* Optional: remove default li spacing */ body.theme-icr .pagination li{ margin: 0 !important; } /* ===== CROP MODAL THEME OVERRIDE ===== */ body.theme-icr .cropper-view-box{ outline: 2px solid var(--icr-accent) !important; outline-color: rgba(201,162,39,.80) !important; box-shadow: 0 0 0 1px rgba(0,0,0,.35); } body.theme-icr .cropper-line{ background-color: rgba(201,162,39,.90) !important; } body.theme-icr .cropper-point{ background-color: rgba(201,162,39,.95) !important; border: 1px solid rgba(0,0,0,.35); box-shadow: 0 2px 6px rgba(0,0,0,.35); } body.theme-icr .cropper-point.point-se{ width: 12px !important; height: 12px !important; opacity: 1 !important; } /* Overlay */ body.theme-icr .cropper-modal{ background-color: rgba(0,0,0,1); opacity: .62; } /* Footer buttons (keep consistent sizing) */ body.theme-icr .modal-footer .btn{ min-width: 110px; height: 42px; font-weight: 600; } /* ===== NOTIFICATION BADGE ===== */ body.theme-icr .notif-wrapper { position: relative; display: inline-flex; align-items: center; transition: all .18s ease; } body.theme-icr .notif-wrapper:hover{ transform: translateY(-1px); } body.theme-icr .notif-icon{ font-size: 1.15rem; color: rgba(232,220,185,.85) !important; transition: all .18s ease; } body.theme-icr .notif-wrapper:hover .notif-icon{ color: var(--icr-accent) !important; } /* === Notification Badge === */ body.theme-icr .notif-badge{ display:inline-flex !important; align-items:center !important; justify-content:center !important; top:-6px; right:-10px; position:absolute; min-width:16px !important; height:16px !important; padding:0 !important; border-radius:999px !important; box-shadow: 0 0 0 2px var(--icr-bg), 0 4px 8px rgba(0,0,0,.4), 0 0 8px rgba(201,162,39,.25); background: linear-gradient( 180deg, rgba(201,162,39,1), rgba(170,135,30,1) ) !important; color: #1b1206 !important; /* dark brown for contrast */ font-size:.65rem !important; font-weight:700; line-height:1 !important; text-align:center; transition: transform .15s ease, box-shadow .15s ease; } body.theme-icr .notif-wrapper:hover .notif-badge{ box-shadow: 0 0 0 2px var(--icr-bg), 0 6px 12px rgba(0,0,0,.5), 0 0 12px rgba(201,162,39,.35); } /* Dropdown menu (transparent hover + padding) */ body.theme-icr .dropdown-menu{ background: var(--icr-bg-2) !important; border: 1px solid rgba(201,162,39,.25) !important; border-radius: .6rem !important; padding: .5rem !important; min-width: 220px; position: absolute; z-index: 1030; box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(201,162,39,.10); } body.theme-icr .dropdown-item{ padding: .5rem .75rem !important; border-radius: .45rem !important; background: transparent !important; color: rgba(248,246,238,.88) !important; transition: background .15s ease, color .15s ease; } body.theme-icr .dropdown-item:hover, body.theme-icr .dropdown-item:focus{ background: rgba(31,111,79,.22) !important; /* soft emerald */ color: var(--icr-white) !important; } /* Prevent the .dropdown wrapper from stretching wide */ body.theme-icr .dropdown{ width: auto !important; } body.theme-icr .dropdown > .dropdown-toggle{ width: auto !important; max-width: 100% !important; } /* Footer (mobile centered, desktop 3 cols) Add class="footer-icr" on