/* ========================================================================== Hello Kuppam — Design System One consistent, soft, premium visual language shared by every module. ========================================================================== */ /* --- Design tokens -------------------------------------------------- */ :root { /* Brand — Deep Blue -> Royal Purple */ --bs-primary: #0F4C81; --bs-primary-rgb: 15, 76, 129; --bs-primary-bg-subtle: #E8EFF7; --bs-primary-border-subtle: #BFD4E8; --bs-primary-text-emphasis: #0B3A63; --bs-link-color: #0F4C81; --bs-link-color-rgb: 15, 76, 129; --bs-link-hover-color: #0B3A63; --bs-link-hover-color-rgb: 11, 58, 99; --bs-warning: #F0A93A; --bs-warning-rgb: 240, 169, 58; --bs-warning-bg-subtle: #FDF1DD; --bs-warning-border-subtle: #F8DBA3; --bs-focus-ring-color: rgba(15, 76, 129, .2); /* Accent palette */ --hk-purple: #5B3DE0; --hk-emerald: #0FA36B; --hk-emerald-bg: #E4F7EF; --hk-sky: #3EC1F3; --hk-gold: #F0A93A; --bs-body-font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --hk-font-heading: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --bs-body-bg: #F6F7FC; --bs-body-color: #333A4D; --bs-border-radius-sm: .5rem; --bs-border-radius: .625rem; --bs-border-radius-lg: 1rem; --bs-border-radius-xl: 1.25rem; --bs-border-radius-2xl: 1.5rem; /* Custom tokens not covered by Bootstrap variables */ --hk-ink: #171A2B; --hk-ink-soft: #6B7089; --hk-border-soft: #EDEFF7; --hk-surface: #FFFFFF; --hk-radius-card: 18px; --hk-radius-pill: 999px; --hk-shadow-sm: 0 2px 10px rgba(23, 25, 46, .05); --hk-shadow-md: 0 10px 28px rgba(23, 25, 46, .08); --hk-shadow-hover: 0 18px 40px rgba(23, 25, 46, .14); --hk-gradient: linear-gradient(135deg, #0B3A63 0%, #0F4C81 45%, #5B3DE0 100%); --hk-gradient-soft: linear-gradient(135deg, rgba(15,76,129,.08) 0%, rgba(91,61,224,.08) 100%); --hk-footer-bg: #171A2B; --hk-footer-border: rgba(255, 255, 255, .08); } /* --- Dark theme tokens ------------------------------------------------------ Toggled by setting data-theme="dark" on (see the navbar theme toggle in base.html + main.js). Because every component below is already built on these shared custom properties, redefining them here is enough to retheme navbar, cards, forms, tables and footer in one place — no per-component dark rule needed except where a component uses a literal color instead of a token (those overrides live further down, grouped by component). -------- */ html[data-theme="dark"] { --bs-primary: #5B9BE8; --bs-primary-rgb: 91, 155, 232; --bs-primary-bg-subtle: rgba(91, 155, 232, .16); --bs-primary-border-subtle: rgba(91, 155, 232, .32); --bs-primary-text-emphasis: #A9CCF3; --bs-link-color: #5B9BE8; --bs-link-color-rgb: 91, 155, 232; --bs-link-hover-color: #8AB8EF; --bs-link-hover-color-rgb: 138, 184, 239; --bs-warning-bg-subtle: rgba(240, 169, 58, .16); --bs-warning-border-subtle: rgba(240, 169, 58, .32); --bs-body-bg: #0F1119; --bs-body-color: #D8DAEA; --hk-ink: #EDEEF7; --hk-ink-soft: #9AA0BE; --hk-border-soft: #262A3D; --hk-surface: #171A28; --hk-shadow-sm: 0 2px 10px rgba(0, 0, 0, .35); --hk-shadow-md: 0 10px 28px rgba(0, 0, 0, .45); --hk-shadow-hover: 0 18px 40px rgba(0, 0, 0, .55); --hk-gradient-soft: linear-gradient(135deg, rgba(91,155,232,.10) 0%, rgba(232,178,61,.10) 100%); --hk-footer-bg: #0A0C14; --hk-footer-border: rgba(255, 255, 255, .06); } /* --- Base ------------------------------------------------------------ */ body { font-family: var(--bs-body-font-family); background-color: var(--bs-body-bg); color: var(--hk-ink); /* Compensates for the always-fixed navbar (see #hkNavbar below) so no page content ever starts underneath it. The homepage hero is the one deliberate exception — it wants to render full-bleed behind the glass navbar — so it cancels this via body.hk-has-transparent-hero. */ padding-top: 76px; } body.hk-has-transparent-hero { padding-top: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--hk-font-heading); font-weight: 600; color: var(--hk-ink); letter-spacing: -0.01em; } html { scroll-behavior: smooth; } a { transition: color .15s ease; } /* --- Ripple buttons ---------------------------------------------------- */ .btn { position: relative; overflow: hidden; } .btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%); opacity: 0; transform: scale(0.6); transition: opacity .5s ease, transform .5s ease; pointer-events: none; } .btn:active::after { opacity: 1; transform: scale(1.4); transition: 0s; } /* --- Shared reveal animation (paired with AOS, provides a CSS-only fallback) --- */ @keyframes hk-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes hk-scale-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } /* --- Navbar -------------------------------------------------------------- Always position:fixed (every page, not just the homepage) so it can never be scrolled out of view, with a high z-index above ordinary content — below Bootstrap modals/tooltips (1055+) so those still layer correctly. body { padding-top } above reserves the matching space so nothing ends up hidden underneath it; the one exception is the homepage hero, which wants to render full-bleed behind the glass navbar (see .hk-has-transparent-hero and the hero's own negative margin, set via main.js). ------------------- */ .navbar { position: fixed !important; top: 0 !important; left: 0; right: 0; z-index: 1050; padding-top: .85rem; padding-bottom: .85rem; transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; } .hk-navbar-transparent { background-color: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .hk-navbar-transparent .navbar-brand, .hk-navbar-transparent .navbar-nav .nav-link { color: #fff !important; } .hk-navbar-transparent .navbar-brand i { color: #fff; } .hk-navbar-transparent .navbar-toggler-icon { filter: invert(1) brightness(2); } .hk-navbar-transparent .nav-link:hover, .hk-navbar-transparent .nav-link:focus { color: #fff !important; background-color: rgba(255, 255, 255, 0.16); } .hk-navbar-solid { background-color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); box-shadow: var(--hk-shadow-sm) !important; border-bottom: 1px solid var(--hk-border-soft); } /* Plain (non-transparent) navbar used on every page except the homepage — themed directly off the shared tokens so it flips with the rest of the site. */ .navbar:not(.hk-navbar-transparent) { background-color: var(--hk-surface) !important; border-bottom: 1px solid var(--hk-border-soft); } html[data-theme="dark"] .hk-navbar-solid { background-color: rgba(15, 17, 25, 0.85) !important; } .navbar .hk-theme-toggle { width: 38px; height: 38px; } .hk-navbar-transparent .hk-theme-toggle { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); color: #fff; } .hk-navbar-transparent .hk-theme-toggle:hover { background: rgba(255, 255, 255, 0.24); } .hk-navbar-transparent.hk-navbar-solid .hk-theme-toggle { background: var(--hk-surface); border-color: var(--hk-border-soft); color: var(--hk-ink-soft); } /* Once scrolled past the hero, .hk-navbar-solid is added alongside .hk-navbar-transparent (which is never removed) — override its white-text rules back to the normal dark navbar colors so text stays legible against the now-solid white background. */ .hk-navbar-transparent.hk-navbar-solid .navbar-brand, .hk-navbar-transparent.hk-navbar-solid .navbar-nav .nav-link { color: var(--hk-ink-soft) !important; } .hk-navbar-transparent.hk-navbar-solid .navbar-brand { color: var(--hk-ink) !important; } .hk-navbar-transparent.hk-navbar-solid .navbar-brand i { color: var(--bs-primary); } .hk-navbar-transparent.hk-navbar-solid .navbar-toggler-icon { filter: none; } .hk-navbar-transparent.hk-navbar-solid .nav-link:hover, .hk-navbar-transparent.hk-navbar-solid .nav-link:focus { color: var(--bs-primary) !important; background-color: var(--bs-primary-bg-subtle); } .navbar-brand { font-family: var(--hk-font-heading); font-size: 1.35rem; font-weight: 700; color: var(--hk-ink) !important; } .navbar-brand i { color: var(--bs-primary); } .navbar-nav .nav-link { font-weight: 500; color: var(--hk-ink-soft) !important; padding: .5rem .9rem !important; border-radius: var(--hk-radius-pill); transition: color .15s ease, background-color .15s ease; position: relative; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { color: var(--bs-primary) !important; background-color: var(--bs-primary-bg-subtle); } .navbar-nav .nav-link.active { font-weight: 600; } .navbar-nav .nav-link.btn { padding: .5rem 1.1rem !important; } /* --- Messages ------------------------------------------------------------ */ .alert { border-radius: var(--bs-border-radius-lg); border: none; } /* --- Hero --------------------------------------------------------------- .hk-hero is the shared compact gradient banner (About page, etc). .hk-hero-fullscreen is an additive modifier used only on the homepage, turning it into a full-bleed slide carousel with overlay. -------------- */ .hk-hero { position: relative; overflow: hidden; color: #fff; background: var(--hk-gradient); } .hk-hero-fullscreen { min-height: 92vh; display: flex; align-items: center; box-sizing: border-box; /* Guarantees clearance under the fixed transparent navbar even when the hero's own content (eyebrow + headline + search + stat tiles) is tall enough that vertical centering alone would push its top edge to y=0. */ padding: 112px 0 56px; } .hk-hero-slides { position: absolute; inset: 0; z-index: 0; } .hk-hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease, transform 8s ease; } .hk-hero-slide.is-active { opacity: 1; transform: scale(1); z-index: 1; } /* Each slide is a themed gradient "photo" panel (swap for a real Kuppam photo/video by setting background-image on this element) representing a local scene, tagged in the corner so placeholders are obvious to replace. */ .hk-hero-slide-tag { position: absolute; bottom: 18px; left: 18px; z-index: 2; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .25); padding: 4px 10px; border-radius: var(--hk-radius-pill); } .hk-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,20,38,.72) 0%, rgba(11,20,38,.6) 30%, rgba(11,20,38,.78) 65%, rgba(11,20,38,.9) 100%), var(--hk-gradient); mix-blend-mode: normal; } .hk-hero::before, .hk-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.10); pointer-events: none; z-index: 1; } .hk-hero::before { width: 420px; height: 420px; top: -180px; right: -120px; } .hk-hero::after { width: 280px; height: 280px; bottom: -160px; left: -80px; background: rgba(255, 255, 255, 0.06); } .hk-hero-content { position: relative; z-index: 2; width: 100%; } .hk-hero-content h1 { color: #fff; font-size: clamp(2.1rem, 4.2vw, 3.4rem); letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); } .hk-hero-content .lead { font-size: clamp(1rem, 1.6vw, 1.3rem); } /* --- Quick category pills under the hero search ------------------------ */ .hk-quick-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: var(--hk-radius-pill); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; font-weight: 500; font-size: .88rem; text-decoration: none; backdrop-filter: blur(6px); transition: transform .2s ease, background-color .2s ease; } .hk-quick-pill:hover { background: rgba(255, 255, 255, 0.26); color: #fff; transform: translateY(-2px); } /* --- Hero scroll cue ----------------------------------------------------- */ .hk-scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; color: rgba(255, 255, 255, .75); font-size: 1.4rem; animation: hk-bounce 2s infinite; } @keyframes hk-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* --- Search shell (hero search bar) ------------------------------------- */ .hk-search-shell { max-width: 820px; background: var(--hk-surface); border-radius: var(--bs-border-radius-xl); box-shadow: 0 20px 50px rgba(11, 20, 38, .35); padding: .6rem; } .hk-search-shell .form-control::placeholder { color: var(--hk-ink-soft); } .hk-search-shell .form-control, .hk-search-shell .form-select { border: none; background: transparent; box-shadow: none; } .hk-search-shell .form-control:focus, .hk-search-shell .form-select:focus { box-shadow: none; } .hk-search-shell .vr { opacity: .15; } /* --- Gold accent CTA (used sparingly: hero search, primary conversion actions) --- */ .btn-hk-gold { background: linear-gradient(135deg, var(--hk-gold) 0%, #C4901F 100%); border: none; color: #241A04; font-weight: 700; } .btn-hk-gold:hover, .btn-hk-gold:focus { color: #241A04; filter: brightness(1.06); } /* --- Hero eyebrow pill (small uppercase label above the headline) --------- */ .hk-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hk-gold); background: rgba(240, 169, 58, .14); border: 1px solid rgba(240, 169, 58, .3); padding: 6px 16px; border-radius: var(--hk-radius-pill); margin-bottom: 22px; } .hk-hero-eyebrow .hk-hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hk-gold); } .hk-hero-content .hk-gold-word { color: var(--hk-gold); } /* --- Hero stat tiles (bordered, translucent — live inside the dark hero, replacing the old white floating stats-strip card below it) -------------- */ .hk-hero-stats { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .hk-hero-stat-tile { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--bs-border-radius-lg); padding: 20px 10px; text-align: center; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; } .hk-hero-stat-tile:hover { background: rgba(255, 255, 255, .09); border-color: rgba(240, 169, 58, .4); transform: translateY(-3px); } .hk-hero-stat-icon { color: var(--hk-gold); font-size: 1.05rem; margin-bottom: 8px; } .hk-hero-stat-tile .hk-stat-number { background: none; -webkit-text-fill-color: initial; color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.6rem); } .hk-hero-stat-tile .hk-stat-label { color: rgba(255, 255, 255, .6); font-size: .74rem; } @media (max-width: 767.98px) { .hk-hero-stats { grid-template-columns: repeat(2, 1fr); } } /* --- Section headers ------------------------------------------------- */ .hk-section-icon { width: 46px; height: 46px; min-width: 46px; border-radius: var(--bs-border-radius-lg); background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; } /* --- Icon circles (cards, hero) --------------------------------------- */ .hk-icon-circle { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .hk-icon-circle-lg { width: 76px; height: 76px; min-width: 76px; font-size: 2rem; } /* --- Services section (homepage) — full-featured category cards -------- */ .hk-service-card { border: none; border-radius: var(--hk-radius-card); background: var(--hk-surface); overflow: hidden; box-shadow: var(--hk-shadow-sm); transition: transform .3s ease, box-shadow .3s ease; height: 100%; display: flex; flex-direction: column; } .hk-service-card:hover { transform: translateY(-8px); box-shadow: var(--hk-shadow-hover); } .hk-service-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .hk-service-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .hk-service-card:hover .hk-service-card-media img { transform: scale(1.08); } .hk-service-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11,20,38,.55) 100%); } /* Icon-display mode: a premium 3D illustration centered on a tinted gradient backdrop, used instead of a cropped photo where a clean, consistent icon fits the site's theme better than a location photo. */ .hk-service-card-media.hk-service-card-media-icon { background: var(--hk-gradient-soft); display: flex; align-items: center; justify-content: center; } .hk-service-card-media.hk-service-card-media-icon::after { background: none; } .hk-service-card-media.hk-service-card-media-icon img { width: 58%; height: 58%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(15, 76, 129, .18)); transition: transform .4s ease; } .hk-service-card:hover .hk-service-card-media.hk-service-card-media-icon img { transform: scale(1.1) translateY(-4px); } .hk-service-card-icon { position: absolute; bottom: -22px; left: 20px; z-index: 2; width: 54px; height: 54px; border-radius: var(--bs-border-radius-lg); background: var(--hk-surface); color: var(--bs-primary); box-shadow: var(--hk-shadow-md); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; transition: background-color .25s ease, color .25s ease; } .hk-service-card:hover .hk-service-card-icon { background: var(--hk-gradient); color: #fff; } .hk-service-card-count { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(0, 0, 0, .5); color: #fff; font-size: .72rem; font-weight: 600; padding: 5px 12px; border-radius: var(--hk-radius-pill); backdrop-filter: blur(4px); } .hk-service-card-body { padding: 34px 22px 22px; display: flex; flex-direction: column; flex: 1; } .hk-service-card-body h5 { font-weight: 700; margin-bottom: 8px; } .hk-service-card-body p { color: var(--hk-ink-soft); font-size: .88rem; line-height: 1.55; flex: 1; } .hk-service-card-body .btn { align-self: flex-start; border-radius: var(--hk-radius-pill); font-weight: 600; padding: 8px 20px; } /* --- Justified body copy (About page, and anywhere longer paragraphs need a more typeset, professional feel) -- text-align-last keeps the final line of each paragraph from being stretched into awkward gaps. --------- */ .hk-text-justify { text-align: justify; text-align-last: left; hyphens: auto; } /* --- About page: alternating service showcase (large photo + content) --- */ .hk-about-service { padding: 3.25rem 0; } .hk-about-service:nth-of-type(even) { background-color: #F8F9FD; } .hk-about-service-media { position: relative; border-radius: var(--hk-radius-card); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--hk-shadow-md); } .hk-about-service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .hk-about-service-media:hover img { transform: scale(1.05); } /* --- Category cards ---------------------------------------------------- */ .hk-category-card { border: none; border-radius: var(--hk-radius-card); background: var(--hk-surface); box-shadow: var(--hk-shadow-sm); transition: transform .2s ease, box-shadow .2s ease; cursor: pointer; } .hk-category-card:hover { transform: translateY(-6px); box-shadow: var(--hk-shadow-hover); } .hk-category-card .hk-icon-circle { margin: 0 auto; } /* --- Universal listing card -------------------------------------------- One shared visual recipe for every card in the app (business, property, job, event, news, upload hub). Add alongside a semantic class for module-specific tweaks if ever needed. */ .hk-card { position: relative; border: none; border-radius: var(--hk-radius-card); background: var(--hk-surface); overflow: hidden; box-shadow: var(--hk-shadow-sm); transition: transform .25s ease, box-shadow .25s ease; } .hk-card:hover { transform: translateY(-6px); box-shadow: var(--hk-shadow-hover); } .hk-card .card-title { font-weight: 600; color: var(--hk-ink); } .hk-card .btn { border-radius: var(--bs-border-radius); font-weight: 500; } .hk-card-img { height: 200px; object-fit: cover; } .hk-detail-img { height: 420px; object-fit: cover; border-radius: var(--hk-radius-card); } /* --- Card meta row (rating / views) and action row (save / maps / share) --- */ .hk-card-meta-row { display: flex; align-items: center; gap: 12px; font-size: .78rem; color: var(--hk-ink-soft); margin-bottom: .5rem; } .hk-card-meta-row .hk-rating i { color: var(--hk-gold); } .hk-card-actions { display: flex; align-items: center; gap: 6px; margin-top: .6rem; } .hk-card-icon-btn { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background-color: #F8F9FD; color: var(--hk-ink-soft); border: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; text-decoration: none; flex: none; } .hk-card-icon-btn:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary); transform: translateY(-2px); } .hk-card-icon-btn.hk-fav-btn:hover { background-color: #FDE9EC; color: #E0426B; } /* --- Featured badge (floats on card corner) ----------------------------- */ .hk-badge-featured { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 600; padding: 6px 12px; border-radius: var(--hk-radius-pill); background: linear-gradient(135deg, #F5A524, #F7C94C); color: #59380A; box-shadow: 0 4px 10px rgba(245, 165, 36, .35); } /* --- Date badge (events / news) ----------------------------------------- */ .hk-badge-date { display: inline-flex; align-items: center; gap: 6px; background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; font-size: .78rem; padding: 6px 12px; border-radius: var(--hk-radius-pill); } /* --- Type / category pill badges ---------------------------------------- */ .badge.bg-primary-subtle { font-weight: 600; padding: 6px 12px; border-radius: var(--hk-radius-pill); } /* --- Breadcrumb ---------------------------------------------------------- */ .breadcrumb { background-color: var(--hk-surface); border-radius: var(--bs-border-radius-lg); padding: 12px 18px; box-shadow: var(--hk-shadow-sm); } .breadcrumb-item a { color: var(--bs-primary); text-decoration: none; font-weight: 500; } .breadcrumb-item.active { color: var(--hk-ink-soft); } /* --- List page search / filter bar --------------------------------------- */ .hk-search-bar { background-color: var(--hk-surface); border-radius: var(--bs-border-radius-xl); box-shadow: var(--hk-shadow-sm); padding: 22px; } .hk-search-bar .form-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hk-ink-soft); font-weight: 600; } .hk-search-bar .input-group-text { background-color: var(--hk-surface); border-right: none; border-color: var(--hk-border-soft); } .hk-search-bar .input-group .form-control, .hk-search-bar .form-select { border-color: var(--hk-border-soft); } .hk-search-bar .input-group .form-control { border-left: none; } .hk-search-bar .form-control:focus, .hk-search-bar .form-select:focus { box-shadow: none; border-color: var(--bs-primary); } /* --- Results summary bar -------------------------------------------------- */ .hk-results-bar { background-color: var(--bs-primary-bg-subtle); border-radius: var(--bs-border-radius-lg); padding: 10px 18px; font-size: .9rem; color: var(--hk-ink-soft); } .hk-results-bar a { color: var(--bs-primary); font-weight: 600; text-decoration: none; } /* --- Empty state ----------------------------------------------------------- */ .hk-empty-state { background-color: var(--hk-surface); border: 1.5px dashed var(--hk-border-soft); color: var(--hk-ink-soft); border-radius: var(--hk-radius-card); } .hk-empty-state i { color: var(--bs-primary-border-subtle); } /* The lone big icon (e.g. ) used across every "no results" state becomes a soft illustration-style badge. */ .hk-empty-state i.display-4 { display: block; width: 96px; height: 96px; line-height: 96px; text-align: center; border-radius: 50%; background: var(--hk-gradient-soft); color: var(--bs-primary) !important; font-size: 2.2rem !important; margin: 0 auto 1.1rem; animation: hk-scale-in .5s ease; } /* --- Image loading shimmer --------------------------------------------------- Applied to every card/detail image while it loads (see main.js); removed once the browser fires 'load'/'error', with a gentle fade-in. ------------- */ .hk-card-img, .hk-detail-img { opacity: 1; transition: opacity .4s ease; } .hk-card-img.hk-img-loading, .hk-detail-img.hk-img-loading { opacity: 0; background: linear-gradient(90deg, #E9EBF3 25%, #F3F4F9 37%, #E9EBF3 63%); background-size: 400% 100%; animation: hk-img-shimmer 1.4s ease infinite; } @keyframes hk-img-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .hk-stat-number { font-family: var(--hk-font-heading); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; background: var(--hk-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; } .hk-stat-label { color: var(--hk-ink-soft); font-size: .85rem; font-weight: 500; } /* --- Category-aware image placeholder (no upload yet) -------------------- */ .hk-card-placeholder { height: 200px; display: flex; align-items: center; justify-content: center; background: var(--hk-gradient-soft); background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary); } .hk-card-placeholder i { font-size: 2.75rem; opacity: .55; } .hk-detail-placeholder { height: 420px; border-radius: var(--hk-radius-card); display: flex; align-items: center; justify-content: center; background: var(--hk-gradient-soft); background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary); } .hk-detail-placeholder i { font-size: 4.5rem; opacity: .55; } /* --- Skeleton loaders ------------------------------------------------------ */ .hk-skeleton { position: relative; overflow: hidden; background-color: #E9EBF3; } .hk-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: hk-shimmer 1.4s infinite; } @keyframes hk-shimmer { 100% { transform: translateX(100%); } } .hk-skeleton-card { border-radius: var(--hk-radius-card); overflow: hidden; box-shadow: var(--hk-shadow-sm); background: var(--hk-surface); } .hk-skeleton-img { height: 200px; } .hk-skeleton-line { height: 12px; border-radius: 6px; margin: 10px 16px; } /* --- Gradient detail hero (Jobs — no image field) --------------------------- */ .hk-detail-hero { background: var(--hk-gradient); border-radius: var(--hk-radius-card); color: #fff; position: relative; overflow: hidden; } .hk-detail-hero .hk-icon-circle { background-color: rgba(255, 255, 255, 0.18); color: #fff; } /* --- Detail info panel (Contact / Details boxes) ----------------------------- */ .hk-detail-panel { border: none; border-radius: var(--hk-radius-card); box-shadow: var(--hk-shadow-sm); background: var(--hk-surface); } /* --- Meta info grid (icon + label + value) ------------------------------------ */ .hk-meta-item { background-color: #F8F9FD; border-radius: var(--bs-border-radius-lg); padding: 14px 16px; height: 100%; display: flex; align-items: center; gap: 12px; transition: background-color .2s ease; } .hk-meta-item:hover { background-color: var(--bs-primary-bg-subtle); } .hk-meta-icon { width: 40px; height: 40px; min-width: 40px; border-radius: var(--bs-border-radius); background-color: var(--bs-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .hk-meta-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--hk-ink-soft); margin-bottom: 2px; } .hk-meta-value { font-weight: 600; color: var(--hk-ink); font-size: .95rem; } .hk-meta-value a { color: var(--hk-ink); text-decoration: none; } .hk-meta-value a:hover { color: var(--bs-primary); } /* --- Description box -------------------------------------------------------- */ .hk-description-box { background-color: #F8F9FD; border-radius: var(--bs-border-radius-lg); padding: 22px; line-height: 1.75; color: var(--hk-ink-soft); } /* --- CTA buttons -------------------------------------------------------------- */ .hk-cta-btn { border-radius: var(--bs-border-radius); padding: 10px 26px; font-weight: 600; } /* --- Related / more listings heading ------------------------------------------- */ .hk-related-heading { position: relative; padding-left: 16px; font-weight: 600; } .hk-related-heading::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: var(--hk-gradient); } /* --- Pagination ------------------------------------------------------------------ */ .pagination .page-link { border-radius: var(--bs-border-radius) !important; margin: 0 3px; color: var(--bs-primary); border: 1px solid var(--hk-border-soft); font-weight: 500; min-width: 42px; text-align: center; } .pagination .page-link:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary); } .pagination .page-item.active .page-link { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff !important; padding-left: 18px; padding-right: 18px; box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), .3); } .pagination .page-item.disabled .page-link { color: #C3C7D6; background-color: transparent; } /* --- Excel Upload Center ----------------------------------------------------------- */ .hk-upload-card { text-align: center; padding: .5rem; } .hk-dropzone { border: 2px dashed var(--bs-primary-border-subtle); border-radius: var(--bs-border-radius-xl); padding: 2.5rem 1.5rem; text-align: center; background-color: var(--bs-primary-bg-subtle); transition: border-color .2s ease, background-color .2s ease; } .hk-dropzone:hover { border-color: var(--bs-primary); } .hk-columns-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--hk-ink-soft); } .hk-error-list { max-height: 280px; overflow-y: auto; } /* --- Footer ------------------------------------------------------------------------- */ footer { background-color: var(--hk-footer-bg) !important; border-top: 1px solid var(--hk-footer-border); transition: background-color .3s ease, border-color .3s ease; } footer a { transition: color .15s ease; } footer a:hover { color: #fff !important; text-decoration: underline !important; } .hk-craftlanee-badge { display: inline-flex; align-items: center; justify-content: center; } .hk-craftlanee-credit a { color: #C9D3FB; text-decoration: none; font-weight: 500; } .hk-craftlanee-credit a:hover { color: #fff !important; } .hk-footer-heading { font-family: var(--hk-font-heading); letter-spacing: .02em; } .hk-footer-links a { color: #A7ADC4; text-decoration: none; display: inline-block; padding: 4px 0; } .hk-footer-links a:hover { color: #fff !important; transform: translateX(3px); } .hk-social-icon { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background-color .2s ease, transform .2s ease; } .hk-social-icon:hover { background: var(--hk-gradient); color: #fff; transform: translateY(-3px); } .hk-newsletter-form { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--hk-radius-pill); padding: 6px; } .hk-newsletter-form input { background: transparent; border: none; color: #fff; } .hk-newsletter-form input::placeholder { color: #8B90A6; } .hk-newsletter-form input:focus { outline: none; box-shadow: none; } /* --- Dashboard (Admin / Super Admin) ------------------------------------------------- */ .hk-dashboard { min-height: calc(100vh - 76px); } .hk-dashboard-sidebar { width: 260px; flex-shrink: 0; background: var(--hk-surface); border-right: 1px solid var(--hk-border-soft); transition: background-color .3s ease, border-color .3s ease; } .hk-dash-brand { display: flex; align-items: center; gap: 10px; padding: 4px 4px 16px; margin-bottom: 12px; border-bottom: 1px solid var(--hk-border-soft); } .hk-dash-profile { display: flex; align-items: center; gap: 10px; background: var(--bs-primary-bg-subtle); border-radius: var(--bs-border-radius-lg); padding: 10px 12px; margin-bottom: 16px; } .hk-dash-profile img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; } .hk-dash-profile .hk-dash-profile-name { font-weight: 600; font-size: .85rem; color: var(--hk-ink); line-height: 1.2; } .hk-dash-profile .hk-dash-profile-role { font-size: .72rem; color: var(--bs-primary); font-weight: 500; } .hk-dash-link { color: var(--hk-ink-soft); border-radius: var(--bs-border-radius); padding: .6rem .8rem; display: flex; align-items: center; gap: .6rem; font-weight: 500; font-size: .92rem; transition: background-color .15s ease, color .15s ease; } .hk-dash-link:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); } .hk-dash-link.active { background: var(--hk-gradient); color: #fff; box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), .3); } .hk-dashboard-main { background: var(--bs-body-bg); transition: background-color .3s ease; } .hk-dash-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; } .hk-theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hk-border-soft); background: var(--hk-surface); color: var(--hk-ink-soft); display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s ease, color .2s ease; } .hk-theme-toggle:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); } .hk-stat-card { border: none; border-radius: var(--hk-radius-card); background: var(--hk-surface); box-shadow: var(--hk-shadow-sm); padding: 1.15rem 1.3rem; height: 100%; display: flex; align-items: center; gap: 14px; transition: transform .2s ease, box-shadow .2s ease, background-color .3s ease; } .hk-stat-card:hover { transform: translateY(-4px); box-shadow: var(--hk-shadow-hover); } .hk-stat-card .hk-stat-icon { width: 44px; height: 44px; min-width: 44px; border-radius: var(--bs-border-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); } .hk-stat-card .hk-stat-value { font-family: var(--hk-font-heading); font-size: 1.5rem; font-weight: 700; color: var(--hk-ink); line-height: 1.1; } .hk-stat-card .hk-stat-label { color: var(--hk-ink-soft); font-size: .78rem; font-weight: 500; } .hk-dash-section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--hk-ink-soft); margin: 1.75rem 0 .9rem; } .hk-dash-section-title:first-child { margin-top: 0; } .hk-dashboard-main .card { border: none; border-radius: var(--hk-radius-card); box-shadow: var(--hk-shadow-sm); } .hk-dashboard-main .card-header { border-radius: var(--hk-radius-card) var(--hk-radius-card) 0 0 !important; border-bottom: 1px solid var(--hk-border-soft); } .hk-dashboard-main .table thead.table-light th { background-color: #F8F9FD; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--hk-ink-soft); border-bottom: none; } .hk-chart-card { background: var(--hk-surface); border-radius: var(--hk-radius-card); box-shadow: var(--hk-shadow-sm); padding: 1.25rem; height: 100%; } @media (max-width: 767.98px) { .hk-dashboard { flex-direction: column; } .hk-dashboard-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--hk-border-soft); } } /* --- Dashboard dark mode -------------------------------------------------------------- Scoped to the dashboard shell only; toggled by adding data-theme="dark" to , persisted in localStorage (see dashboard/base_dashboard.html). ------------------------ */ html[data-theme="dark"] .hk-dashboard-main { background: #12141F; } html[data-theme="dark"] .hk-dashboard-sidebar, html[data-theme="dark"] .hk-stat-card, html[data-theme="dark"] .hk-chart-card, html[data-theme="dark"] .hk-dashboard-main .card { background: #191C2B; border-color: #262A3D; color: #E4E6F1; } html[data-theme="dark"] .hk-dashboard-sidebar { border-right-color: #262A3D; } html[data-theme="dark"] .hk-dash-brand { border-bottom-color: #262A3D; } html[data-theme="dark"] .hk-dashboard-main .table { color: #E4E6F1; } html[data-theme="dark"] .hk-dashboard-main .table thead.table-light th { background-color: #20233590; color: #9AA0BE; } html[data-theme="dark"] .hk-dashboard-main .card-header { background-color: #191C2B !important; color: #E4E6F1; border-bottom-color: #262A3D; } html[data-theme="dark"] .hk-stat-card .hk-stat-value, html[data-theme="dark"] .hk-dash-profile-name, html[data-theme="dark"] .hk-dashboard-main h3, html[data-theme="dark"] .hk-dashboard-main h4, html[data-theme="dark"] .hk-dashboard-main h5, html[data-theme="dark"] .hk-dashboard-main h6 { color: #F1F2F8; } /* --- Dashboard: Posts toolbar & table polish ----------------------------------------- */ .hk-filter-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--hk-ink-soft); margin-bottom: .35rem; display: block; } .hk-dashboard-main .form-select, .hk-dashboard-main .form-control { border-color: var(--hk-border-soft); border-radius: 10px; font-size: .85rem; padding-top: .5rem; padding-bottom: .5rem; } .hk-dashboard-main .form-select:focus, .hk-dashboard-main .form-control:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .12); } .hk-dashboard-main .btn { border-radius: 10px; font-size: .86rem; } .hk-bulkbar { border: 1px solid var(--hk-border-soft); border-radius: var(--hk-radius-card); background: var(--hk-surface); padding: .8rem 1.1rem; transition: border-color .2s ease, background-color .2s ease; } .hk-bulkbar.hk-bulkbar-active { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); } .hk-bulkbar-count { font-size: .82rem; font-weight: 600; color: var(--hk-ink-soft); } .hk-bulkbar.hk-bulkbar-active .hk-bulkbar-count { color: var(--bs-primary); } .hk-post-thumb { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; box-shadow: var(--hk-shadow-sm); } .hk-status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .7rem; border-radius: var(--hk-radius-pill); font-size: .72rem; font-weight: 600; white-space: nowrap; } .hk-status-pill::before { content: ''; width: 6px; height: 6px; min-width: 6px; border-radius: 50%; background: currentColor; } .hk-status-approved { background: var(--hk-emerald-bg); color: var(--hk-emerald); } .hk-status-pending { background: var(--bs-warning-bg-subtle); color: #B8790A; } .hk-status-rejected { background: #FCE9EC; color: #dc3545; } .hk-status-changes_requested { background: var(--bs-info-bg-subtle); color: #0C7C92; } .hk-type-pill { display: inline-block; padding: .3rem .62rem; border-radius: var(--hk-radius-pill); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .hk-type-business { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); } .hk-type-property { background: #F1E8FD; color: #7C3AED; } .hk-type-job { background: var(--hk-emerald-bg); color: var(--hk-emerald); } .hk-type-event { background: #FFEFE0; color: #C2691A; } .hk-type-news { background: #FDE4EE; color: #C22C79; } .hk-row-action-btn { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: #F8F9FD; color: var(--hk-ink-soft); border: none; font-size: .85rem; transition: background-color .15s ease, color .15s ease, transform .15s ease; } .hk-row-action-btn:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); transform: translateY(-1px); } .hk-row-action-btn.hk-row-action-danger:hover { background: #FCE9EC; color: #dc3545; } .hk-dashboard-main .table tbody tr { transition: background-color .12s ease; } .hk-dashboard-main .table tbody tr:hover { background-color: #FAFBFF; } .hk-dashboard-main .table td { vertical-align: middle; } .hk-post-title-off { opacity: .55; } .hk-toolbar-card .card-body { padding: 1.25rem 1.4rem; } html[data-theme="dark"] .hk-bulkbar { background: #191C2B; border-color: #262A3D; } html[data-theme="dark"] .hk-bulkbar.hk-bulkbar-active { background: rgba(var(--bs-primary-rgb), .16); } html[data-theme="dark"] .hk-dashboard-main .form-select, html[data-theme="dark"] .hk-dashboard-main .form-control { background-color: #12141F; border-color: #262A3D; color: #E4E6F1; } html[data-theme="dark"] .hk-dashboard-main .table tbody tr:hover { background-color: #1D2032; } html[data-theme="dark"] .hk-row-action-btn { background: #20233590; color: #9AA0BE; } html[data-theme="dark"] .hk-type-business { background: rgba(var(--bs-primary-rgb), .18); } html[data-theme="dark"] .hk-type-property { background: rgba(124, 58, 237, .18); color: #C4A6FA; } html[data-theme="dark"] .hk-type-job { background: rgba(15, 163, 107, .18); } html[data-theme="dark"] .hk-type-event { background: rgba(194, 105, 26, .2); color: #F0A868; } html[data-theme="dark"] .hk-type-news { background: rgba(194, 44, 121, .2); color: #F291C0; } html[data-theme="dark"] .hk-dash-link { color: #9AA0BE; } html[data-theme="dark"] .hk-dash-link:hover { background: #20233D; color: #C7D2FE; } html[data-theme="dark"] .hk-theme-toggle { background: #191C2B; border-color: #262A3D; color: #E4E6F1; } html[data-theme="dark"] .hk-dashboard-main .text-muted { color: #8B90A6 !important; } .hk-status-active { background: var(--hk-emerald-bg); color: var(--hk-emerald); } .hk-status-inactive { background: #F1F2F8; color: var(--hk-ink-soft); } html[data-theme="dark"] .hk-status-inactive { background: #20233590; color: #9AA0BE; } /* --- Inline moderation panel (approve/reject/changes-requested with a note) ----------- */ .hk-review-form { background: #F8F9FD; border: 1px solid var(--hk-border-soft); border-radius: var(--bs-border-radius-lg); padding: 14px 16px; } html[data-theme="dark"] .hk-review-form { background: #191C2B; border-color: #262A3D; } /* --- Community engagement (listing detail pages) -------------------------------------- */ .hk-engage-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .hk-engage-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--hk-radius-pill); border: 1.5px solid var(--hk-border-soft); background: var(--hk-surface); color: var(--hk-ink-soft); font-weight: 600; font-size: .88rem; text-decoration: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } .hk-engage-btn:hover { border-color: var(--bs-primary-border-subtle); background: var(--bs-primary-bg-subtle); color: var(--bs-primary); transform: translateY(-2px); } .hk-engage-btn.hk-like-active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .hk-engage-btn.hk-fav-active { background: #E0426B; border-color: #E0426B; color: #fff; } .hk-engage-stat { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: var(--hk-radius-pill); background: #F8F9FD; color: var(--hk-ink-soft); font-weight: 600; font-size: .85rem; } .hk-engage-stat .bi-star-fill { color: var(--hk-gold); } .hk-share-card, .hk-comments-card, .hk-reviews-card { background: var(--hk-surface); border-radius: var(--hk-radius-card); box-shadow: var(--hk-shadow-sm); padding: 1.4rem; height: 100%; } .hk-share-icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; border: 1.5px solid var(--hk-border-soft); background: var(--hk-surface); color: var(--hk-ink-soft); transition: all .2s ease; } .hk-share-icon-btn:hover { transform: translateY(-3px); color: #fff; border-color: transparent; } .hk-share-whatsapp:hover { background: #25D366; } .hk-share-facebook:hover { background: #1877F2; } .hk-share-telegram:hover { background: #229ED9; } .hk-share-twitter:hover { background: #000; } .hk-share-copy:hover { background: var(--bs-primary); } .hk-comment-avatar { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; background: var(--hk-gradient); color: #fff; font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; } .hk-comment-item, .hk-review-item { background: #F8F9FD; border-radius: var(--bs-border-radius-lg); padding: 14px 16px; } /* Interactive 5-star picker for the review form */ .hk-star-picker { display: inline-flex; gap: 6px; font-size: 1.6rem; cursor: pointer; } .hk-star-picker i { color: #D8DAE8; transition: color .15s ease, transform .15s ease; } .hk-star-picker i.is-filled { color: var(--hk-gold); } .hk-star-picker i:hover { transform: scale(1.15); } /* Read-only star display for submitted reviews */ .hk-star-display { color: var(--hk-gold); font-size: .95rem; letter-spacing: 2px; } .hk-star-display .bi-star { color: #D8DAE8; } /* --- History of Kuppam page ------------------------------------------------------------ */ /* Full-bleed photographic hero, mirrors the homepage hero pattern */ .hk-history-hero { position: relative; min-height: 62vh; display: flex; align-items: center; overflow: hidden; color: #fff; background-size: cover; background-position: center; animation: hk-history-hero-zoom 18s ease-in-out infinite alternate; } @keyframes hk-history-hero-zoom { from { background-size: 100%; } to { background-size: 112%; } } .hk-history-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,20,38,.55) 0%, rgba(11,20,38,.72) 60%, rgba(11,20,38,.9) 100%); } .hk-history-hero-content { position: relative; z-index: 2; width: 100%; } .hk-history-hero-content h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); text-shadow: 0 2px 20px rgba(0,0,0,.3); } .hk-history-scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,.8); font-size: 1.3rem; animation: hk-bounce 2s infinite; } .hk-history-toc { position: sticky; top: 76px; z-index: 5; background: var(--hk-surface); border-bottom: 1px solid var(--hk-border-soft); padding: 14px 0; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; } .hk-history-toc a { display: inline-block; margin-right: 8px; padding: 7px 16px; border-radius: var(--hk-radius-pill); background: var(--bs-primary-bg-subtle); color: var(--bs-primary); font-size: .82rem; font-weight: 600; text-decoration: none; transition: background-color .2s ease, color .2s ease; } .hk-history-toc a:hover { background: var(--bs-primary); color: #fff; } .hk-history-section { padding: 4.5rem 0; scroll-margin-top: 135px; } .hk-history-section:nth-of-type(even) { background-color: #F8F9FD; } /* Real-photo media panel (replaces the old gradient/icon placeholder) */ .hk-history-media { position: relative; border-radius: var(--hk-radius-card); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--hk-shadow-md); } .hk-history-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .hk-history-media.hk-history-media-contain { background: var(--bs-primary-bg-subtle); } .hk-history-media.hk-history-media-contain img { object-fit: contain; padding: 2.5rem; } .hk-history-media:hover img { transform: scale(1.06); } .hk-history-media-tag { position: absolute; bottom: 14px; left: 14px; z-index: 2; font-size: .66rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .4); padding: 4px 10px; border-radius: var(--hk-radius-pill); } .hk-history-icon { width: 52px; height: 52px; min-width: 52px; border-radius: var(--bs-border-radius-lg); background: var(--bs-primary-bg-subtle); color: var(--bs-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; } .hk-history-note { background: var(--hk-gradient-soft); border-radius: var(--hk-radius-card); padding: 1.25rem 1.5rem; font-size: .92rem; color: var(--hk-ink-soft); } /* --- Vertical timeline (chronological quick index) -------------------------------------- */ .hk-timeline { position: relative; max-width: 900px; margin: 0 auto; padding-left: 2px; } .hk-timeline::before { content: ""; position: absolute; left: 27px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--hk-gradient); } .hk-timeline-item { position: relative; display: flex; gap: 1.25rem; padding-bottom: 2rem; text-decoration: none; color: inherit; } .hk-timeline-item:last-child { padding-bottom: 0; } .hk-timeline-icon { position: relative; z-index: 1; width: 56px; height: 56px; min-width: 56px; border-radius: 50%; background: var(--hk-surface); border: 3px solid var(--bs-primary); color: var(--bs-primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: var(--hk-shadow-sm); transition: background-color .2s ease, color .2s ease, transform .2s ease; } .hk-timeline-item:hover .hk-timeline-icon { background: var(--hk-gradient); color: #fff; transform: scale(1.08); } .hk-timeline-body { background: var(--hk-surface); border-radius: var(--bs-border-radius-lg); box-shadow: var(--hk-shadow-sm); padding: 14px 18px; flex: 1; transition: box-shadow .2s ease, transform .2s ease; } .hk-timeline-item:hover .hk-timeline-body { box-shadow: var(--hk-shadow-hover); transform: translateX(4px); } .hk-timeline-period { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-primary); } .hk-timeline-title { font-weight: 600; color: var(--hk-ink); margin-bottom: 2px; } .hk-timeline-summary { font-size: .85rem; color: var(--hk-ink-soft); margin-bottom: 0; } /* --- Gallery of Kuppam ------------------------------------------------------------------ */ .hk-gallery-item { position: relative; border-radius: var(--bs-border-radius-lg); overflow: hidden; aspect-ratio: 1 / 1; cursor: pointer; box-shadow: var(--hk-shadow-sm); } .hk-gallery-item.hk-gallery-wide { aspect-ratio: 2.2 / 1; } .hk-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .hk-gallery-item:hover img { transform: scale(1.1); } .hk-gallery-caption { position: absolute; inset: auto 0 0 0; padding: 10px 12px; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); color: #fff; font-size: .76rem; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; } .hk-gallery-item:hover .hk-gallery-caption { opacity: 1; transform: translateY(0); } /* --- Photo credits ------------------------------------------------------------------------ */ .hk-credits { font-size: .78rem; color: var(--hk-ink-soft); } .hk-credits summary { cursor: pointer; font-weight: 600; color: var(--bs-primary); } .hk-credits ul { columns: 2; margin-top: .75rem; } @media (max-width: 767.98px) { .hk-credits ul { columns: 1; } } /* --- Responsive tweaks --------------------------------------------------------------- */ @media (max-width: 767.98px) { .hk-hero-content h1 { font-size: 2rem; } } /* --- Sitewide form polish (floating labels + validation feedback) -------------------- */ .form-control, .form-select { border-color: var(--hk-border-soft); border-radius: var(--bs-border-radius-lg); } .form-control:focus, .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .12); } .form-label { font-weight: 600; font-size: .88rem; color: var(--hk-ink); } /* Floating label wrapper — every text/email/tel/textarea/select input site-wide. The widget's own placeholder is kept (Django forms already set one) but hidden visually so it doesn't double up with the floated label. */ .form-floating > .form-control, .form-floating > .form-select { border-color: var(--hk-border-soft); border-radius: var(--bs-border-radius-lg); } .form-floating > .form-control:focus, .form-floating > .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .12); } .form-floating > .form-control::placeholder { color: transparent; } .form-floating > label { color: var(--hk-ink-soft); } .form-floating > textarea.form-control { height: auto; min-height: calc(3.5rem + 2px); padding-top: 1.625rem; } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { color: var(--bs-primary); opacity: 1; } /* Inline validation — wrap a .form-floating (or any field block) in .hk-field-invalid when {{ field.errors }} is truthy; no widget changes needed. */ .hk-field-invalid > .form-control, .hk-field-invalid > .form-select { border-color: #dc3545; } .hk-field-invalid > .form-control:focus, .hk-field-invalid > .form-select:focus { box-shadow: 0 0 0 .18rem rgba(220, 53, 69, .15); } .hk-field-error { color: #dc3545; font-size: .8rem; margin-top: .35rem; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .form-floating > .form-control, html[data-theme="dark"] .form-floating > .form-select { background-color: #12141F; border-color: #262A3D; color: #E4E6F1; } html[data-theme="dark"] .form-floating > label { color: #9AA0BE; } /* --- Sitewide pagination polish ------------------------------------------------------- */ .pagination { gap: 6px; } .pagination .page-link { border: none; border-radius: var(--hk-radius-pill); color: var(--hk-ink-soft); font-weight: 600; min-width: 40px; text-align: center; padding: .5rem .85rem; transition: background-color .15s ease, color .15s ease, transform .15s ease; } .pagination .page-link:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary); transform: translateY(-1px); } .pagination .page-link:focus { box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .15); } .pagination .page-item.active .page-link { background: var(--hk-gradient); color: #fff; } .pagination .page-item.disabled .page-link { background: transparent; color: var(--hk-ink-soft); opacity: .55; } html[data-theme="dark"] .pagination .page-link { color: #9AA0BE; } html[data-theme="dark"] .pagination .page-link:hover { background-color: rgba(var(--bs-primary-rgb), .18); } /* --- Sitewide dark theme: remaining components that use a literal color instead of a token (everything else already flips via the tokens redefined at the top of this file under html[data-theme="dark"]) ------------------- */ html[data-theme="dark"] .hk-about-service:nth-of-type(even), html[data-theme="dark"] .hk-history-section:nth-of-type(even) { background-color: #171A28; } html[data-theme="dark"] .hk-card-icon-btn, html[data-theme="dark"] .hk-meta-item, html[data-theme="dark"] .hk-description-box, html[data-theme="dark"] .hk-engage-stat, html[data-theme="dark"] .hk-comment-item, html[data-theme="dark"] .hk-review-item { background-color: #1D2032; } html[data-theme="dark"] .hk-meta-item:hover { background-color: var(--bs-primary-bg-subtle); } html[data-theme="dark"] .hk-card-img.hk-img-loading, html[data-theme="dark"] .hk-detail-img.hk-img-loading { background: linear-gradient(90deg, #1D2032 25%, #262A3D 37%, #1D2032 63%); background-size: 400% 100%; } html[data-theme="dark"] .hk-skeleton { background-color: #1D2032; } html[data-theme="dark"] .hk-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); } html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--hk-ink-soft); } html[data-theme="dark"] .hk-history-toc { border-bottom-color: var(--hk-border-soft); } html[data-theme="dark"] .hk-history-toc a { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); } html[data-theme="dark"] .navbar-toggler-icon { filter: invert(1) brightness(1.8); } /* Bootstrap text-color utilities (.text-muted, .text-dark) are used across every template for card titles and secondary copy but aren't theme-aware by default — left alone, they render near-invisible on a dark surface. */ html[data-theme="dark"] .text-muted { color: var(--hk-ink-soft) !important; } html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-body { color: var(--hk-ink) !important; } html[data-theme="dark"] .text-secondary { color: var(--hk-ink-soft) !important; } html[data-theme="dark"] .bg-white { background-color: var(--hk-surface) !important; } html[data-theme="dark"] .bg-light { background-color: #171A28 !important; } html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end { border-color: var(--hk-border-soft) !important; } html[data-theme="dark"] .card { background-color: var(--hk-surface); color: var(--hk-ink); } html[data-theme="dark"] hr { border-color: var(--hk-border-soft); opacity: 1; }