/* ICR Pedigree – Clean theme stylesheet (scoped) Usage (to avoid conflicts): Add class="theme-icr" to (or to your top wrapper). */ :root{ /* Backgrounds */ --icr-bg: #000000; --icr-bg-2: #0d0d0d; --icr-bg-3: #1a1a1a; /* Text */ --icr-text:#ffffff; --icr-accent: #d4af37; /* Elegant gold */ /* Hover */ --icr-hover: #f5c542; /* Champagne gold */ /* Accent colors */ --icr-gold: #d4af37; --icr-warm-gold: #e6c86e; /* Warm Champagne gold */ /* Social (keep brand but soften UI base) */ --fb-blue:rgba(66, 103, 178, 1); --fb-blue-brand:rgba(66,103,178,1); --insta-pink: rgba(214, 41, 118, 1); --insta-pink-brand:rgba(214,41,118,1); --art-red:rgba(255,0,0,1); /* Base white */ --icr-white:#ffffff; --icr-border:rgba(255, 255, 255, .15); --icr-text-box-shadow: rgba(212, 175, 55, .35); /* Subtle / Secondary text */ --icr-muted:rgba(255, 255, 255, .75); /* Disabled state */ --icr-disabled: rgba(80, 80, 80, .4); /* Focus ring / highlight */ --icr-focus: rgba(255,255,255,.35); /* Headings */ --icr-heading: #f3f1e7; --icr-danger: #c43d3d; /* Deep Crimson */ --icr-warning: #e0b84c; /* Muted Amber / Golden Yellow */ --icr-success: #3fa76a; /* Muted Emerald Green */ --icr-primary: var(--icr-gold); } /* Global */ body.theme-icr{ background: var(--icr-bg); background-image: url("../img/background.png"); background-repeat: repeat; color: var(--icr-text); font-size: .9rem; } @media (max-width: 767.98px){ 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); /* gold */ text-decoration: none; font-weight: 500; transition: all .2s ease; } body.theme-icr a:hover{ color: var(--icr-hover); background: rgba(255,255,255,.08); border-radius: .35rem; } body.theme-icr a.active{ color: var(--icr-white); background: rgba(255,255,255,.12); border-radius: .4rem; padding: .2rem .4rem; } /* ===== NOTIFICATION BADGE ===== */ /* ===== WRAPPER ===== */ body.theme-icr .notif-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: .28rem .45rem; border-radius: .6rem; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; } /* ===== ICON ===== */ body.theme-icr .notif-icon{ font-size: 1.15rem; color: rgba(255,255,255,.72) !important; transition: color .18s ease; } /* ===== HOVER ===== */ body.theme-icr .notif-wrapper:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); } body.theme-icr .notif-wrapper:hover .notif-icon{ color: #ffffff !important; } /* ===== ACTIVE ===== */ body.theme-icr .notif-wrapper.active{ background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } body.theme-icr .notif-wrapper.active .notif-icon{ color: #ffffff !important; } /* ==== BADGE ==== */ body.theme-icr .notif-badge{ position: absolute; top: -4px; right: -6px; background: var(--icr-gold); color: #000; font-size: .65rem; font-weight: 600; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0 4px; line-height: 1; box-shadow: 0 0 0 2px #000; transform: translate(20%, -20%); } /* ==== USER TOGGLE ==== */ body.theme-icr .icr-topbar .icr-user-toggle{ color: rgba(255,255,255,.75); padding: .28rem .45rem; border-radius: .65rem; transition: background .15s ease, color .15s ease; } body.theme-icr .icr-topbar .icr-user-toggle:hover, body.theme-icr .icr-topbar .icr-user-toggle[aria-expanded="true"]{ background: rgba(255,255,255,.08); color: var(--icr-gold); } /* mobile icon links */ @media (max-width: 767.98px){ body.theme-icr .icr-top-actions > a{ padding: .3rem .4rem; border-radius: .5rem; } } /* ===== NAVBAR UNIFIED SYSTEM ===== */ body.theme-icr .icr-topbar{ position: relative; z-index: 1030; border-bottom: 1px solid rgba(212,175,55,.18); box-shadow: 0 1px 0 rgba(212,175,55,.12), 0 10px 22px rgba(0,0,0,.45); } body.theme-icr header .icr-mainnav{ position: relative; z-index: 1020; border-bottom: 1px solid rgba(212,175,55,.18); box-shadow: 0 1px 0 rgba(212,175,55,.12), 0 10px 22px rgba(0,0,0,.45); } body.theme-icr .icr-topbar .icr-user-menu{ z-index: 1055 !important; } body.theme-icr .icr-topbar, body.theme-icr header .icr-mainnav{ backdrop-filter: blur(6px); } /* Base (top + main) */ body.theme-icr .icr-topbar a, body.theme-icr header .icr-mainnav .nav-link{ color: rgba(255,255,255,.72); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: .35rem .6rem; border-radius: .6rem; transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease; } /* Hover */ body.theme-icr .icr-topbar a:hover, body.theme-icr header .icr-mainnav .nav-link:hover{ background: rgba(255,255,255,.08); color: var(--icr-gold); } /* Active */ body.theme-icr .icr-topbar a.active, body.theme-icr header .icr-mainnav .nav-link.active{ background: rgba(255,255,255,.12); color: #ffffff; border: 1px solid rgba(255,255,255,.15); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } body.theme-icr .icr-topbar .notif-wrapper{ border-radius: 999px; } body.theme-icr .icr-topbar .notif-wrapper:hover{ background: rgba(255,255,255,.08); } body.theme-icr .icr-topbar .notif-wrapper.active{ background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } body.theme-icr .icr-topbar .notif-wrapper.active .notif-icon{ color: #ffffff !important; } /* 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; } /* ===== UNIFIED DROPDOWN FOR ALL NAVBARS ===== */ /* shell */ body.theme-icr .navbar .dropdown-menu, body.theme-icr .icr-user-menu{ background: #111; border: 1px solid rgba(255,255,255,.15); border-radius: .85rem; padding: .45rem; min-width: 220px; box-shadow: 0 14px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06); } /* item base */ body.theme-icr .navbar .dropdown-menu .dropdown-item, body.theme-icr .icr-user-menu .dropdown-item{ display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); border-radius: .6rem; padding: .52rem .72rem; font-weight: 500; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } /* hover */ body.theme-icr .navbar .dropdown-menu .dropdown-item:hover, body.theme-icr .icr-user-menu .dropdown-item:hover{ background: rgba(255,255,255,.08); color: var(--icr-gold); } /* active */ body.theme-icr .navbar .dropdown-menu .dropdown-item.active, body.theme-icr .navbar .dropdown-menu .dropdown-item:active, body.theme-icr .icr-user-menu .dropdown-item.active, body.theme-icr .icr-user-menu .dropdown-item:active{ background: rgba(255,255,255,.12) !important; color: #ffffff !important; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } /* divider */ body.theme-icr .navbar .dropdown-menu .dropdown-divider, body.theme-icr .icr-user-menu .dropdown-divider{ border-top: 1px solid rgba(255,255,255,.10); margin: .4rem 0; } /* dropdown toggle itself */ body.theme-icr .navbar .dropdown-toggle{ color: rgba(255,255,255,.72); border-radius: .6rem; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } body.theme-icr .navbar .dropdown-toggle:hover, body.theme-icr .navbar .dropdown-toggle[aria-expanded="true"]{ background: rgba(255,255,255,.08); color: var(--icr-gold); } /* remove bootstrap harsh active blue */ body.theme-icr .navbar .dropdown-item:focus, body.theme-icr .navbar .dropdown-item:active{ box-shadow: none; } /* mobile */ @media (max-width: 767.98px){ body.theme-icr .navbar .dropdown-menu, body.theme-icr .icr-user-menu{ min-width: 200px; border-radius: .75rem; padding: .4rem; } body.theme-icr .navbar .dropdown-menu .dropdown-item, body.theme-icr .icr-user-menu .dropdown-item{ padding: .5rem .65rem; } } /* 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; } /* 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,.9) !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-red { color: var(--icr-danger) !important; } .text-fb-blue { color: var(--fb-blue) !important; } .text-fb-blue:hover{ color: #b9f0ee !important; } .text-insta-pink { color: var(--insta-pink) !important; } .text-insta-pink:hover{ color: #ffc2d1 !important; } .text-art-red { color: var(--art-red) !important; } .text-nowrap { white-space: nowrap; } .canine-name{ color: var(--icr-accent); font-weight: 600; } .date{ color: var(--icr-muted); font-size: 0.75rem; } .desc{ color: var(--icr-primary); font-size: 0.9rem; font-weight: 500; } .text-icr-brand{ color: var(--icr-gold) !important; font-weight: 700; letter-spacing: .5px; text-shadow: 0 0 6px rgba(212,175,55,.18); } .text-icr-brand:hover{ text-shadow: 0 0 10px rgba(212,175,55,.35); } /* Divider */ body.theme-icr hr{ border: none; height: 2px; background: rgba(45, 58, 46, .36); 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-gold) !important; color: #000 !important; border: 2px solid var(--icr-gold) !important; border-radius: .6rem; padding: .45rem .85rem !important; font-weight: 600 !important; letter-spacing: .2px; box-shadow: 0 4px 12px rgba(0,0,0,.22); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .05s ease; } body.theme-icr a.button-theme:hover, body.theme-icr button.button-theme:hover{ background: var(--icr-hover) !important; color: #000 !important; border-color: var(--icr-hover) !important; box-shadow: 0 0 0 .2rem rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.28); text-decoration: none; transform: translateY(-1px); } body.theme-icr a.button-theme:active, body.theme-icr button.button-theme:active{ transform: translateY(0); background: var(--icr-gold) !important; color: #000 !important; border-color: var(--icr-gold) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.25); } /* 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; } /* Outline */ body.theme-icr a.button-outline-theme, body.theme-icr button.button-outline-theme{ background: transparent !important; color: rgba(255,255,255,.85) !important; border: 1px solid rgba(255,255,255,.25) !important; border-radius: .6rem; padding: .45rem .85rem !important; font-weight: 600 !important; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease; } body.theme-icr a.button-outline-theme:hover, body.theme-icr button.button-outline-theme:hover{ background: rgba(255,255,255,.08) !important; color: #ffffff !important; border-color: rgba(255,255,255,.4) !important; box-shadow: 0 0 0 .12rem rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.28); transform: translateY(-1px); } body.theme-icr a.button-outline-theme:active, body.theme-icr button.button-outline-theme:active{ transform: translateY(0); background: rgba(255,255,255,.12) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.25); } /* === Theme buttons (secondary) === */ body.theme-icr button.button-theme-secondary{ background: linear-gradient( 180deg, rgba(42,42,42,1), rgba(22,22,22,1) ) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #ffffff !important; border-radius: .6rem; padding: .45rem .85rem !important; font-weight: 600 !important; letter-spacing: .2px; box-shadow: 0 4px 12px rgba(0,0,0,.22); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .05s ease; } body.theme-icr button.button-theme-secondary:hover{ background: linear-gradient( 180deg, rgba(58,58,58,1), rgba(30,30,30,1) ) !important; color: #ffffff !important; border-color: rgba(255,255,255,.28) !important; box-shadow: 0 0 0 .16rem rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.28); transform: translateY(-1px); } body.theme-icr button.button-theme-secondary:active{ transform: translateY(0); background: linear-gradient( 180deg, rgba(24,24,24,1), rgba(12,12,12,1) ) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.28); } /* body.theme-icr button.button-theme-tertiary{ background: rgba(186,153,255,.15) !important; border: 1px solid rgba(186,153,255,.45) !important; color: rgba(120,90,170,1) !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(255,210,235,.35) !important; color: #ffffff !important; border-color: rgba(186,153,255,.75) !important; box-shadow: 0 0 0 .16rem rgba(200,170,255,.25); transform: translateY(-1px); } body.theme-icr button.button-theme-tertiary:active{ transform: translateY(0); background: rgba(155,120,240,.85) !important; border-color: rgba(255,200,220,.45) !important; box-shadow: 0 2px 5px rgba(0,0,0,.18) inset; } */ /* === Theme button tertiary === */ body.theme-icr button.button-theme-tertiary{ background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.12) !important; color: rgba(255,255,255,.75) !important; box-shadow: none; border-radius: .6rem; letter-spacing: .2px; padding: .45rem .85rem !important; font-weight: 600 !important; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease; } body.theme-icr button.button-theme-tertiary:hover{ background: rgba(255,255,255,.08) !important; color: #ffffff !important; border-color: rgba(255,255,255,.25) !important; transform: translateY(-1px); } body.theme-icr button.button-theme-tertiary:active{ transform: translateY(0); background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.18) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.25); } /* === PAGINATION === */ body.theme-icr .pagination{ gap: .2rem; /* jarak antar item */ } /* Anchor as button */ /* === Pagination Base === */ body.theme-icr .pagination a.button-theme{ background: rgba(0,0,0,.55) !important; color: rgba(255,255,255,.88) !important; border: 1px solid rgba(255,255,255,.16) !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: 600 !important; text-decoration: none !important; box-shadow: 0 6px 14px rgba(0,0,0,.28) !important; backdrop-filter: blur(4px); transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .08s ease; } /* Hover */ body.theme-icr .pagination a.button-theme:hover{ background: rgba(0,0,0,.78) !important; color: #ffffff !important; border-color: rgba(255,255,255,.28) !important; box-shadow: 0 8px 18px rgba(0,0,0,.34) !important; transform: translateY(-1px); } /* Active / current page */ body.theme-icr .pagination a.button-theme.active, body.theme-icr .pagination a.button-theme.current, body.theme-icr .pagination .active a.button-theme, body.theme-icr .pagination .current a.button-theme{ background: var(--icr-gold) !important; color: #000 !important; border-color: var(--icr-gold) !important; box-shadow: 0 8px 18px rgba(0,0,0,.34), 0 0 0 2px rgba(255,255,255,.08) !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 rgba(255,255,255,.9) !important; box-shadow: 0 0 0 1px rgba(0,0,0,.35); } body.theme-icr .cropper-line{ background-color: rgba(255,255,255,.92) !important; } body.theme-icr .cropper-point{ background-color: rgba(255,255,255,.96) !important; border: 1px solid rgba(0,0,0,.35); box-shadow: 0 2px 6px rgba(0,0,0,.22); } 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,.55); opacity: 1; } /* Footer buttons (keep consistent sizing) */ body.theme-icr .modal-footer .btn{ min-width: 110px; height: 42px; font-weight: 600; } /* Footer (mobile centered, desktop 3 cols) Add class="footer-icr" on