/* ============================================================
DIMAU PREMIUM — v1
Thin upgrade layer. Sits ON TOP of dimau-ui.css, overrides nothing
structural: it retunes the existing --dui-* tokens to the sky-blue
brand and adds the motion techniques the base system lacks.
Load LAST in :
============================================================ */
/* ---------- 1. BRAND CORRECTION (light) ----------
Was: --dui-bg #f6f7f9 (grey), --dui-accent #5b46d6 (purple).
Now: sky-blue identity, light surfaces, dark text only. */
/* :root:root:root — repeated deliberately. dimau-ui.css sets its dark
tokens with :root:not([data-theme="light"]), which outranks a plain
:root, so these would lose on a phone set to dark. */
:root:root:root {
/* The sky-blue identity must show on open, whatever the phone
is set to, so this app does not follow the OS dark setting. */
color-scheme: light only;
--dui-bg: #87CEEB; /* the signature — recognisable on open */
--dui-surface: rgba(255, 255, 255, .72);
--dui-surface-2: rgba(255, 255, 255, .86);
--dui-surface-hover: rgba(255, 255, 255, .94);
--dui-border: rgba(255, 255, 255, .72);
--dui-border-strong: rgba(14, 58, 82, .16);
--dui-text: #0E3A52;
--dui-text-2: #35607A;
--dui-text-3: #5C829A;
--dui-accent: #1E88C7;
--dui-accent-hover: #16689B;
--dui-accent-on: #ffffff;
--dui-accent-soft: rgba(30, 136, 199, .12);
--dui-ring: rgba(30, 136, 199, .38);
--dui-danger: #C0392B; /* expensive debts */
--dui-success: #1E8E6A;
/* Spring easing — overshoots a hair and settles, like a real object */
--dui-spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%,
.849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%,
1.015 60.2%, 1.006 80.2%, 1);
--dui-glass-blur: 22px;
}
/* ---------- 2. AMBIENT LIGHT ----------
Flat colour behind frosted panels looks like grey plastic. These two
soft highlights give the glass something to actually refract. */
body, body:not([data-theme="x"]) {
background-color: var(--dui-bg);
background-image:
radial-gradient(120% 70% at 12% -5%, rgba(255,255,255,.72), transparent 60%),
radial-gradient(95% 55% at 100% 8%, rgba(255,255,255,.38), transparent 55%);
background-attachment: fixed;
overscroll-behavior-y: none; /* no rubber-band = app, not page */
}
/* ---------- 3. GLASS PANELS ----------
The specular top edge is what separates "glass" from "grey box". */
.panel {
-webkit-backdrop-filter: blur(var(--dui-glass-blur)) saturate(165%);
backdrop-filter: blur(var(--dui-glass-blur)) saturate(165%);
background-image: linear-gradient(to bottom, rgba(255,255,255,.32), transparent 44%);
border-radius: var(--dui-r-xl, 22px);
}
/* ---------- 4. PRESS FEEDBACK ----------
Every tappable thing should physically give. 120ms, barely noticed,
completely changes how responsive the app feels. */
button, .primary, .ghost, [role="button"], label.row {
transition: transform 120ms var(--dui-ease), background-color 150ms linear;
touch-action: manipulation;
}
button:active, .primary:active, .ghost:active, [role="button"]:active { transform: scale(.96); }
/* Minimum comfortable thumb target */
button, .primary, .ghost { min-height: 48px; }
/* ---------- 5. SLIDER ----------
The hero control on this app. Bigger thumb, springy grab. */
input[type="range"] { height: 44px; } /* was 34px — under the 44px tap minimum */
input[type="range"]::-webkit-slider-thumb {
box-shadow: 0 4px 14px rgba(14,58,82,.28);
transition: transform 140ms var(--dui-spring);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
/* ---------- 6. SCROLL-DRIVEN REVEAL ----------
Browser-native, no JavaScript, no scroll listeners. Steps rise into
place as you reach them. Degrades to nothing on older browsers. */
@supports (animation-timeline: view()) {
.step, .panel {
animation: dm-rise linear both;
animation-timeline: view();
animation-range: entry 0% entry 40%;
}
}
@keyframes dm-rise {
from { opacity: 0; transform: translateY(22px) scale(.975); }
to { opacity: 1; transform: none; }
}
/* ---------- 7. PAGE TRANSITIONS ----------
Native cross-fade between pages instead of a white flash. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: dm-out 190ms var(--dui-ease) both; }
::view-transition-new(root) { animation: dm-in 360ms var(--dui-ease) both; }
@keyframes dm-out { to { opacity: 0; transform: translateX(-6%); } }
@keyframes dm-in { from { opacity: 0; transform: translateX(8%); } }
/* ---------- 8. NUMBERS ----------
Tabular figures stop money jittering as the slider moves. */
.money, .num, .pct, td, .result-line {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.money { font-family: var(--dui-font-display); font-weight: 800; }
/* ---------- 9. TYPE POLISH ---------- */
h1, h2, h3 { text-wrap: balance; letter-spacing: -.02em; }
p, .lead-in, .small { text-wrap: pretty; }
/* ---------- 10. HELP BUBBLES (no "?", no underline) ----------
Add data-help="..." to any element. Hover on desktop, tap on phone. */
[data-help] { position: relative; cursor: help; }
[data-help]::after {
content: attr(data-help);
position: absolute; left: 0; bottom: calc(100% + 10px);
width: max-content; max-width: 260px;
padding: 10px 13px;
font-family: var(--dui-font-body); font-size: var(--dui-text-sm);
font-weight: 400; line-height: 1.4;
color: var(--dui-text); background: var(--dui-surface-2);
-webkit-backdrop-filter: blur(18px) saturate(170%);
backdrop-filter: blur(18px) saturate(170%);
border: 1px solid var(--dui-border);
border-radius: var(--dui-r-md, 12px);
box-shadow: 0 10px 30px rgba(14,58,82,.18);
opacity: 0; transform: translateY(6px) scale(.97);
pointer-events: none; z-index: 60;
transition: opacity 160ms var(--dui-ease), transform 300ms var(--dui-spring);
}
@media (hover: hover) { [data-help]:hover::after { opacity: 1; transform: none; } }
[data-help]:focus-visible::after, [data-help].dm-open::after { opacity: 1; transform: none; }
/* ---------- 11. PERFORMANCE ----------
Deliberately empty. An earlier version put
.step { content-visibility: auto; contain-intrinsic-size: auto 420px }
here on the assumption that .step was a whole section. It is not — it
is the small header div holding the number and the title, so every
off-screen heading reserved 420px of blank page. Removed; the saving
was never worth measuring on a page this size. */
/* ---------- 12. RESPECT MOTION PREFERENCES ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
@view-transition { navigation: none; }
}
/* ============================================================
13. LEGACY PALETTE
The app carries an older token set (--bg, --surface, --ink …)
that predates --dui-*, and it is natively dark. .panel paints
itself from var(--surface), so without this the cards stay
charcoal on a sky-blue page. Mapped to the same brand values.
============================================================ */
:root:root:root {
--bg: #87CEEB;
--surface: rgba(255, 255, 255, .72);
--surface-2: rgba(255, 255, 255, .86);
--ink: #0E3A52;
--muted: #35607A;
--step: #0E3A52;
--line: rgba(14, 58, 82, .16);
--accent: #1E88C7;
--accent-ink: #FFFFFF;
--accent-soft: rgba(30, 136, 199, .12);
--focus: #1E88C7;
--bad: #C0392B; /* expensive debts */
--bad-soft: rgba(192, 57, 43, .10);
--warn: #B9741A;
--warn-soft: rgba(185, 116, 26, .12);
--chart-a: #1E88C7;
--chart-b: #1E8E6A;
--chart-c: #5C829A;
/* Shell header: light glass with dark text, not the navy band */
--dm-header: rgba(255, 255, 255, .58);
--dm-header-text: #0E3A52;
--dm-ink: #0E3A52;
--dm-border: rgba(14, 58, 82, .16);
--dm-focus: #1E88C7;
}
/* Frosted header rather than a flat block */
:is(#dimau-shell-header, body > .wrap > header, body > header) {
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
border-bottom: 1px solid rgba(255, 255, 255, .6);
}
/* ============================================================
14. METRIC TILES
The inline "Dimau metric design v1" block paints the result
tiles, the chart and the headline answer in dark navy with its
own hard-coded values. Same shapes, light glass instead.
============================================================ */
:is(.hero .tile, .chartwrap, .top-answer .answer):is(.hero .tile, .chartwrap, .top-answer .answer) {
--metric-accent: #1E88C7;
--metric-glow: rgba(30, 136, 199, .16);
--ink: #0E3A52; --ink-soft: #35607A; --muted: #35607A;
--line: rgba(14, 58, 82, .14);
--text-primary: #0E3A52; --text-secondary: #35607A; --text-muted: #5C829A;
--surface-1: rgba(255, 255, 255, .78); --surface-2: rgba(255, 255, 255, .88);
--line-soft: rgba(14, 58, 82, .10);
--paper: rgba(255, 255, 255, .78); --paper2: rgba(255, 255, 255, .88);
--ink2: #35607A; --ink3: #5C829A;
--card: rgba(255, 255, 255, .78);
--green-dd: #0E3A52; --green-l: #1E88C7;
color: #0E3A52;
color-scheme: light;
background:
radial-gradient(ellipse at 100% 0, rgba(30, 136, 199, .14), transparent 72%),
linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .66));
-webkit-backdrop-filter: blur(20px) saturate(165%);
backdrop-filter: blur(20px) saturate(165%);
border: 1px solid rgba(255, 255, 255, .72);
border-top-color: rgba(255, 255, 255, .95);
box-shadow: 0 2px 10px rgba(14, 58, 82, .06), 0 16px 40px -18px rgba(14, 58, 82, .28);
}
:is(.hero .tile, .chartwrap, .top-answer .answer):nth-child(3n+2):is(.hero .tile, .chartwrap, .top-answer .answer) {
--metric-accent: #1E8E6A; --metric-glow: rgba(30, 142, 106, .14);
}
:is(.hero .tile, .chartwrap, .top-answer .answer):nth-child(3n):is(.hero .tile, .chartwrap, .top-answer .answer) {
--metric-accent: #2E7FA8; --metric-glow: rgba(46, 127, 168, .14);
}
:is(.hero .tile .big, .top-answer .answer .big):is(*) { color: #0E3A52; }
:is(.hero .tile .lbl, .hero .tile .sub, .top-answer .answer p, .chartwrap .legend):is(*) { color: #35607A; }
.chartwrap:is(.chartwrap) { --chart-a: #1E88C7; --chart-c: #2E7FA8; }
/* ============================================================
15. CONTRAST
Measured on the built page, not guessed. Against the frosted
surface and against bare sky blue, the first pass failed WCAG
AA (4.5:1) in three places:
#1E88C7 accent text 3.59:1 white on that accent 3.89:1
#35607A muted text 3.88:1 on sky blue
header subtitle 1.56:1 — a light grey left over from
the dark shell header
These are the darkened values. All now clear 4.5:1.
============================================================ */
:root:root:root {
--dui-accent: #1773AC; /* 4.75:1 on glass, 5.14:1 for white on it */
--dui-accent-hover: #125D8C;
--dui-text-2: #2B5268; /* 4.81:1 on bare sky blue */
--dui-text-3: #2B5268;
--dui-ring: rgba(23, 115, 172, .40);
--dui-accent-soft: rgba(23, 115, 172, .13);
--accent: #1773AC;
--accent-soft: rgba(23, 115, 172, .13);
--focus: #1773AC;
--muted: #2B5268;
--chart-a: #1773AC;
--dm-focus: #1773AC;
}
/* The shell header's subtitle keeps a light grey from when the
header was a dark navy band. On frosted glass it is unreadable. */
:is(header .brandrow > div > p), header p { color: #2B5268 !important; }
/* !important is required here, not preferred: dimau-shell.css sets this
colour !important, so nothing else can reach it. */
/* ============================================================
16. PHONE LAYOUT
The header had no phone layout. is a plain block, so
every child claimed its own line — brand row, Welcome, Sign in —
217px of furniture before the app began, inside a band that was
358px wide on a 390px screen so it floated with a gap each side.
============================================================ */
@media (max-width: 560px) {
/* Edge to edge, not a floating band */
:is(#dimau-shell-header, body > .wrap > header, body > header) {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start; /* the shell spreads these apart */
gap: 8px;
width: auto;
margin-inline: calc(var(--dm-gutter, 16px) * -1);
padding: 10px var(--dm-gutter, 16px);
border-radius: 0;
}
/* Brand row owns the first line; share button stays on it */
header .brandrow {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
row-gap: 4px;
flex-wrap: wrap;
}
/* The wrapper around the title and strapline is display:contents, so the
flex items here are really: logotile, .brand, p, .hdr-right. Ordering
them keeps logo + title + share on line one and drops the strapline,
full width, onto line two. */
header .brandrow .logotile { order: 1; flex: none; }
header .brandrow .brand { order: 2; flex: 1 1 auto; min-width: 0; }
header .brandrow .hdr-right{ order: 3; flex: none; margin-left: auto; }
header .brandrow > div > p { order: 4; flex: 1 1 100%; }
/* The strapline is the first thing to go when space is short —
the h1 above it already says what the app is. */
header .brandrow > div > p { font-size: 12.5px; line-height: 1.35; margin: 2px 0 0; }
/* Welcome and Sign in share one line instead of taking two */
/* The shell pins this pill with :root :is(#dimau-shell-utility, .bw-pill)
and !important, giving it an auto side margin that throws Sign in to the
far edge. Matching that weight is the only way to reach it. */
:root :is(#dimau-shell-utility, .bw-pill),
:root :is(#dimau-shell-utility, .bw-pill):is(#dimau-shell-utility, .bw-own-line) {
width: fit-content !important;
flex: 0 0 auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* .dm-acct carries margin-left:auto from the shell, which on one line
throws Sign in to the far edge away from Welcome. */
header .dm-acct { flex: 0 1 auto; margin-left: 0 !important; }
/* Step headings: keep the number beside the words, stop mid-phrase wraps */
.step > h2, .panel > h2 {
display: flex;
align-items: center;
gap: 10px;
font-size: 19px;
line-height: 1.2;
text-wrap: balance;
}
/* A 48px number badge beside a wrapping heading leaves a dead gap. */
.step > h2 .n, .panel > h2 .n,
.step .n, .panel .n {
flex: none;
width: 30px; height: 30px;
font-size: 15px;
display: inline-grid; place-items: center;
}
/* Tighter card padding so content gets the width, not the gutters */
.panel { padding-inline: 14px; }
/* Figures and their labels sit on one line rather than stacking */
.result-line { gap: 10px; }
}
/* ============================================================
17. THE HERO
One answer, made large and certain; everything else quiet.
The old screen stacked six cards of near-identical tone, so
nothing led. This gives the page a single focal point.
============================================================ */
/* A FIELD, not a flat tint. A pale panel on a pale background has
nothing to lift off — the deep top is what lets the card cast. */
body {
background-image:
radial-gradient(120% 80% at 50% -8%, rgba(255,255,255,.50), transparent 55%),
linear-gradient(176deg, #5FB4DC 0%, #9FD6EE 34%, var(--dui-bg) 70%, #EAF6FC 100%);
}
.hero-answer {
background: #fff;
border-radius: 30px;
padding: 28px 24px 10px;
margin: 4px 0 16px;
position: relative;
overflow: hidden;
/* Depth is a stack: contact shadow, mid lift, long ambient.
One blur reads as a sticker; three read as an object. */
box-shadow:
0 1px 2px rgba(6,41,59,.07),
0 8px 18px -8px rgba(6,41,59,.16),
0 40px 70px -40px rgba(6,41,59,.45);
}
/* One hairline of light along the top edge — most of what makes a
white rectangle look manufactured rather than drawn. */
.hero-answer::before {
content: ''; position: absolute; inset: 0 0 auto; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 30%, rgba(255,255,255,.95) 70%, transparent);
}
.hero-answer .eyebrow {
font-size: 11.5px; font-weight: 500; letter-spacing: .14em;
text-transform: uppercase; color: #4C7A92; margin: 0 0 10px;
}
/* 58px against 11.5px is a five-fold jump. Two sizes close together
read as a form; far apart, they read as a statement. */
.hero-answer .figure {
font-family: var(--dui-font-display); font-weight: 800;
font-size: clamp(42px, 13vw, 58px);
line-height: .92; letter-spacing: -.045em;
margin: 0; color: #06293B;
font-variant-numeric: tabular-nums lining-nums;
}
.hero-answer .figure .mo {
display: block; font-size: .40em; letter-spacing: -.015em;
color: #4C7A92; font-weight: 700; margin-top: 10px; line-height: 1.2;
}
.hero-answer .delta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 16px; padding: 7px 13px 7px 10px;
background: rgba(14,143,107,.10); color: #0A6B50;
border-radius: 999px; font-size: 13px; font-weight: 500;
}
.hero-answer .delta svg { width: 13px; height: 13px; flex: none; }
.hero-answer .delta.warn { background: rgba(192,57,43,.10); color: #9A2F22; }
/* The chart is the emotion — two lines diverging is the whole
argument — so it gets the full width of the card. */
.hero-answer .chartwrap {
margin: 18px -24px 0; padding: 0; background: none;
border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero-answer .chartwrap canvas { display: block; width: 100%; height: 190px; border-radius: 0; }
.hero-answer .axis {
display: flex; justify-content: space-between;
padding: 6px 24px 10px; font-size: 11px; color: #86A6B8;
font-variant-numeric: tabular-nums;
}
.hero-answer .legend {
display: flex; gap: 18px; flex-wrap: wrap;
padding: 0 24px 4px; font-size: 11.5px; color: #4C7A92;
}
.hero-answer .legend span { display: inline-flex; align-items: center; gap: 7px; }
.hero-answer .legend span::before {
content: ''; width: 16px; height: 3px; border-radius: 2px; background: var(--dui-accent);
}
/* The comparison line is grey and dashed on the chart, so its
swatch must be too — a legend that lies is worse than none. */
.hero-answer .legend .k-min::before {
background: none; height: 0; border-top: 2.5px dashed rgba(6,41,59,.32);
}
.hero-answer .legend i { display: none; }
/* Supporting figures: quiet, aligned, hairline-separated. */
.herostats {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
margin-top: 16px; border-top: 1px solid rgba(6,41,59,.09);
}
.herostats:empty { display: none; border: 0; }
.herostats .stat { padding: 16px 4px 6px; text-align: center; position: relative; }
.herostats .stat + .stat::before {
content: ''; position: absolute; left: 0; top: 18px; bottom: 8px;
width: 1px; background: rgba(6,41,59,.09);
}
.herostats .v {
font-family: var(--dui-font-display); font-weight: 800; font-size: 19px;
letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #06293B;
}
.herostats .k { font-size: 11px; color: #4C7A92; margin-top: 3px; }
.herostats .stat.good .v { color: #0E8F6B; }
/* ---------- One control, not six ---------- */
.hero-control {
background: rgba(255,255,255,.62);
-webkit-backdrop-filter: blur(16px) saturate(170%);
backdrop-filter: blur(16px) saturate(170%);
border: 1px solid rgba(255,255,255,.75);
border-radius: 22px; padding: 18px 20px 20px; margin-bottom: 14px;
box-shadow: 0 1px 2px rgba(6,41,59,.05), 0 18px 34px -24px rgba(6,41,59,.4);
}
.hero-control .val {
display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px;
}
.hero-control .val span { font-size: 13px; color: #265D79; }
.hero-control .val b {
font-family: var(--dui-font-display); font-weight: 800; font-size: 26px;
letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #06293B;
}
.hero-control .ends {
display: flex; justify-content: space-between;
font-size: 11px; color: #5A8AA3; margin-top: -2px; font-variant-numeric: tabular-nums;
}
/* ---------- The fiddly inputs, folded away until wanted ---------- */
.tune {
background: rgba(255,255,255,.52);
border: 1px solid rgba(255,255,255,.7);
border-radius: 18px; margin-bottom: 18px; overflow: hidden;
}
.tune > summary {
list-style: none; cursor: pointer;
padding: 14px 18px; font-size: 13.5px; font-weight: 500; color: #1B5A79;
display: flex; align-items: center; justify-content: space-between; min-height: 48px;
}
.tune > summary::-webkit-details-marker { display: none; }
.tune > summary::after {
content: ''; width: 8px; height: 8px; flex: none;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg) translate(-2px,-2px);
transition: transform 220ms var(--dui-ease);
}
.tune[open] > summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.tune-body { padding: 0 18px 18px; }
/* ---------- Entrance: the screen assembles itself, once ---------- */
@keyframes dm-settle { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.hero-answer, .hero-control { animation: dm-settle .7s var(--dui-spring) both; }
.hero-control { animation-delay: .09s; }
@media (max-width: 560px) {
.hero-answer { border-radius: 26px; padding: 24px 18px 8px; }
.hero-answer .chartwrap { margin-inline: -18px; }
.hero-answer .axis, .hero-answer .legend { padding-inline: 18px; }
}
/* The hero is the card. Anything inside it that still carries its own
card styling — the old answer tile, the chart panel — has to be
flattened, or you get a card inside a card inside a field. */
.hero-answer .answer,
.hero-answer .chartwrap,
.hero-answer .chartwrap:is(.chartwrap) {
background: none !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin-block: 0;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
animation: none !important;
}
.hero-answer .chartwrap { margin: 18px -24px 0 !important; }
@media (max-width: 560px) { .hero-answer .chartwrap { margin-inline: -18px !important; } }
/* The comparison line is a grey dashed reference, not a second hero. */
:root:root:root { --chart-c: #AFC2CE; }
/* --chart-c is set on .chartwrap itself by the older metric block, so a
:root override never reaches it — the nearer declaration wins. */
.hero-answer .chartwrap:is(.chartwrap) { --chart-a: #1E88C7; --chart-c: #AFC2CE; }
/* The slider is the only control on the page, so it takes the width. */
.hero-control input[type="range"] { width: 100%; display: block; }
/* A 190px-tall chart across 1100px reads as a letterbox. Give it height
where there is room, and cap the hero so the figure keeps its weight. */
@media (min-width: 720px) {
.hero-answer, .hero-control, .tune { max-width: 860px; margin-inline: auto; }
.hero-answer .chartwrap canvas { height: 280px; }
}
/* Marks the hero figures as the built-in example, so nobody mistakes
them for their own on a first visit. Disappears on the first edit. */
.hero-answer .extag {
display: inline-block; margin-left: 6px;
padding: 3px 8px; border-radius: 999px;
background: rgba(23,115,172,.12); color: #15658F;
font-size: 10px; font-weight: 600; letter-spacing: .06em;
text-transform: uppercase; vertical-align: 2px;
}