:root {
/* ================
DSH BRAND TOKENS
================= */
/* Primary accents */
--dsh-green: #39A34A; /* Search green */
--dsh-amber: #F2B01E; /* Visualise yellow */
--dsh-purple: #6F2DBD; /* Analyse purple */
/* Neutrals (clean “Gov-ish but modern”) */
--dsh-ink: #0f172a; /* near-slate-900 */
--dsh-text: #111827; /* slate-900 */
--dsh-muted: #6b7280; /* slate-500 */
--dsh-bg: #ffffff;
--dsh-surface: #ffffff;
--dsh-surface-2: #f8fafc; /* slate-50 */
--dsh-border: rgba(15, 23, 42, .12);
/* Typography + layout */
--dsh-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--radius-lg: 18px;
--radius-pill: 999px;
/* Shadows (subtle, like your user-testing cards) */
--shadow-1: 0 8px 24px rgba(15, 23, 42, .08);
--shadow-2: 0 16px 40px rgba(15, 23, 42, .14);
/* Focus ring (accessible) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
box-shadow: var(--focus) !important;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
box-shadow: none !important;
}
}
.dsh-logo {
height: 34px; /* adjust as needed */
width: auto;
}
html, body {
font-family: var(--dsh-font);
color: var(--dsh-text);
background: var(--dsh-bg);
}
/* If you already load Inter on your user-testing page,
keep it consistent by adding this in :
*/
/* ================
BACKGROUND
(image stays visible; overlay is applied only in the hero panel)
================= */
body {
font-family: var(--dsh-font);
color: var(--dsh-text);
background: var(--dynamic-bg, none);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
/* ================
NAVBAR (clean, semi-translucent)
================= */
.navbar {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, .82);
border-bottom: 1px solid var(--dsh-border);
}
.navbar-brand {
letter-spacing: -0.01em;
}
/* NAV link styling: subtle, institutional */
.navbar .nav-link {
color: var(--dsh-muted);
font-weight: 500;
border-radius: 999px;
padding: .45rem .8rem;
transition: background-color .15s ease, color .15s ease;
}
.navbar .nav-link:hover {
color: var(--dsh-ink);
background: rgba(15, 23, 42, .06);
}
/* Active link (if you set .active on the current page/section) */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
color: var(--dsh-ink);
background: rgba(111, 45, 189, .10); /* subtle DSH purple tint */
}
/* ================
HERO
================= */
.hero {
padding: 5rem 0 4rem; /* more breathing room */
}
.hero-panel {
background: rgba(255, 255, 255, 0.90);
border: 1px solid var(--dsh-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card-strong);
padding: 3rem;
}
.hero-quickstart {
padding: 3rem;
}
@media (max-width: 991.98px) {
.hero-quickstart {
padding: 1.75rem;
}
}
@media (max-width: 991.98px) {
.hero {
padding: 3.25rem 0 2.75rem;
}
.hero-panel {
padding: 1.75rem;
}
}
.hero h1 {
letter-spacing: -0.02em;
color: var(--dsh-ink);
}
.hero-lead {
color: var(--dsh-muted);
max-width: 60ch;
}
.hero-badge {
border: 1px solid var(--dsh-border);
background: rgba(255, 255, 255, .78);
border-radius: var(--radius-pill);
padding: .45rem .8rem;
display: inline-flex;
gap: .5rem;
align-items: center;
color: var(--dsh-muted);
}
/* Buttons: keep Bootstrap base, just tune feel */
.portal-btn {
border-radius: var(--radius-pill);
font-weight: 600;
}
.btn-dark {
background: var(--dsh-ink);
border-color: var(--dsh-ink);
}
.btn-dark:hover {
background: #0b1220;
border-color: #0b1220;
}
.btn-outline-dark {
border-color: rgba(15, 23, 42, .25);
}
.btn-outline-dark:hover {
background: rgba(15, 23, 42, .06);
}
/* Accessible focus */
a:focus, button:focus, .btn:focus {
box-shadow: var(--focus) !important;
}
/* ================
CARDS
================= */
.feature-card {
border: 1px solid var(--dsh-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-1);
background: rgba(255, 255, 255, .90);
}
/* ================
PORTAL TILES (brand accents but restrained)
================= */
.portal-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.1rem;
}
.portal-tile {
border-radius: var(--radius-lg);
border: 1px solid var(--dsh-border);
overflow: hidden;
box-shadow: var(--shadow-1);
background: var(--dsh-surface);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
position: relative;
min-height: 240px;
display: flex;
align-items: end;
}
.portal-tile:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-2);
border-color: rgba(15, 23, 42, .20);
}
.portal-tile .bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.02);
}
/* Overlay: slightly lighter than before (more “Option A/B middle”) */
.portal-tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(15, 23, 42, .86), rgba(15, 23, 42, .22) 60%, rgba(15, 23, 42, .08));
pointer-events: none;
}
.portal-tile .content {
position: relative;
padding: 1.25rem 1.25rem 1.2rem;
color: #fff;
width: 100%;
}
.portal-tile h2 {
font-size: clamp(1.6rem, 3.6vw, 2.4rem);
margin: 0 0 .35rem;
letter-spacing: -0.02em;
}
.portal-tile p {
margin: 0 0 .9rem;
color: rgba(255, 255, 255, .86);
max-width: 54ch;
}
.tile-meta {
display: flex;
gap: .5rem;
flex-wrap: wrap;
align-items: center;
}
.pill {
display: inline-flex;
gap: .4rem;
align-items: center;
border: 1px solid rgba(255, 255, 255, .25);
background: rgba(255, 255, 255, .12);
padding: .35rem .6rem;
border-radius: var(--radius-pill);
font-size: .9rem;
}
/* Optional: add a tiny coloured accent bar per tile (Search/Visualise/Analyse) */
.portal-tile[data-accent="green"] .content::before,
.portal-tile[data-accent="amber"] .content::before,
.portal-tile[data-accent="purple"] .content::before {
content: "";
display: block;
width: 56px;
height: 6px;
border-radius: 99px;
margin-bottom: .75rem;
}
.portal-tile[data-accent="green"] .content::before {
background: var(--dsh-green);
}
.portal-tile[data-accent="amber"] .content::before {
background: var(--dsh-amber);
}
.portal-tile[data-accent="purple"] .content::before {
background: var(--dsh-purple);
}
/* Grid spans */
.span-12 {
grid-column: span 12;
}
.span-6 {
grid-column: span 12;
}
.span-4 {
grid-column: span 12;
}
@media (min-width: 992px) {
.span-6 {
grid-column: span 6;
}
.span-4 {
grid-column: span 4;
}
.portal-tile {
min-height: 300px;
}
}
.section-title {
letter-spacing: -0.02em;
}
/* =================
VIDEO SECTION
================= */
.video-card iframe {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card-strong);
}
/* Slight spacing refinement */
#video {
margin-top: 1rem;
}
/* ================
FOOTER
================= */
footer {
background: var(--dsh-bg);
border-top: 1px solid var(--dsh-border);
color: var(--dsh-muted);
}
footer a {
color: var(--dsh-muted);
}
footer a:hover {
color: var(--dsh-text);
}