tasplanning_report/public/css/style.css

:root {
	--bs-body-color: #d3d3d3;
	--gray-900: #0a0a0a;
	--gray-800: #222;
	--gray-700: #444;
	--gray-600: #666;
	--muted: #9ca3af;
}

/* Global page backdrop: subtle vertical gray gradient */
body {
	background: linear-gradient(180deg, var(--gray-900) 0%, var(--gray-800) 40%, var(--gray-700) 100%);
}

/* Dot badge in navbar */
.badge-dot {
	display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem;
}

/* Cadence-inspired UI spices */
.pill {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .75rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:#ddd; font-size:.9rem;
}
.pill .dot { width:.45rem; height:.45rem; border-radius:50%; background: #8ef; opacity:.9; }

.glow-card {
  position:relative; border:1px solid rgba(255,255,255,.08);
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.gradient-border {
  position:relative; border-radius:1rem; overflow:hidden;
  background: linear-gradient(180deg,#141414,#0f0f0f);
}
.gradient-border::before {
  content:""; position:absolute; inset:-1px;
  background: linear-gradient(135deg, rgba(160,160,255,.5), rgba(160,255,240,.25), rgba(255,160,220,.25));
  filter: blur(12px); z-index:0;
}
.gradient-border > .inner {
  position:relative; z-index:1; border:1px solid rgba(255,255,255,.06); border-radius:1rem;
  padding:1.25rem;
}
.badge-coming {
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:#b9e6ff;
}
.section-subtle {
  background: linear-gradient(180deg, var(--gray-800), var(--gray-700));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}


/* Section spacing */
.section {
	padding: 4rem 0;
}
.section-tight { padding: 2.5rem 0; }

/* Alternating card containers on every second section */
.section-cardwrap {
	background: linear-gradient(180deg, var(--gray-800), var(--gray-700));
	border-top: 1px solid rgba(255,255,255,.06);
	border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Hero with watermark map on the right */
.hero {
	position: relative;
	overflow: hidden;
	min-height: 68vh;
	display: grid;
	place-items: center;
	background: radial-gradient(1200px 600px at 110% 50%, rgba(255,255,255,.06), transparent 70%);
}
.hero::after {
	content: "";
	position: absolute; inset: 0; pointer-events: none;
	background-image: url('../image/white-logo.png'); /* replace if needed */
	background-repeat: no-repeat;
	background-position: right -80px center;
	background-size: 680px auto;
	opacity: .08; filter: grayscale(1);
}

.hero .lead { color: var(--muted); }

/* Cards */
.feature-card {
	background: linear-gradient(180deg, #141414, #0f0f0f);
	border: 1px solid rgba(255,255,255,.06);
}
.feature-card .icon {
	font-size: 1.6rem; line-height: 1; width: 2.5rem; height: 2.5rem;
	display:flex; align-items:center; justify-content:center;
	border-radius: .75rem; background: rgba(255,255,255,.06);
}

/* Step line for "How it works" */
.step { position: relative; }
.step:not(:last-child)::after {
	content: ""; position: absolute; top: 2.25rem; left: 1.25rem; width: 2px; height: calc(100% - 2.5rem);
	background: rgba(255,255,255,.08);
}

/* Footer */
footer { border-top: 1px solid rgba(255,255,255,.08); }

.vh-75 {
	min-height: 75vh !important;
}