/* =========================================================== DISINEDA — shared presentation styles Palette: bg #F6F7F8 near-white canvas bg-alt #ECEEF1 quiet alternate section slate-1 #5C6569 dark slate gray slate-2 #718790 muted teal-gray slate-3 #9FAEB4 light blue-gray ink #353F4E slate navy (text / wordmark / dark slides) red #871F1F logo red — accent, one job per slide red-soft #D08379 red tint legible on ink backgrounds =========================================================== */ /* Inter (variable) — self-hosted so the deck renders offline */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --bg: #F6F7F8; --bg-alt: #ECEEF1; --surface: #ffffff; --slate-1: #5C6569; --slate-2: #718790; --slate-3: #9FAEB4; --ink: #353F4E; --ink-soft: #5b6472; --red: #871F1F; --red-warm: #942525; --red-soft: #D08379; --line: rgba(53,63,78,.14); --shadow: 0 18px 50px -18px rgba(53,63,78,.45); --shadow-soft: 0 10px 34px -18px rgba(53,63,78,.35); --radius: 18px; --maxw: 1180px; --font: "Inter", "Helvetica Neue", Arial, sans-serif; } /* wide canvases (incl. the 1920×1080 slide export): scale the whole type ramp up and let content claim more of the page — the deck is read at a distance */ @media (min-width: 1500px) { html { font-size: 19px; } :root { --maxw: 1480px; } } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-snap-type: y mandatory; /* anchor each slide while scrolling */ scroll-padding-top: 0; } body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.55; } /* ---------- scroll-snap deck ---------- */ .deck { } /* snap container is ; see scroll-snap-type above */ .slide { position: relative; height: 100dvh; /* one screen; dvh avoids mobile address-bar jump */ scroll-snap-align: start; scroll-snap-stop: always; /* don't skip past a slide in one swipe */ padding: 78px clamp(20px, 6vw, 90px) 56px; display: flex; flex-direction: column; justify-content: safe center; /* center when it fits, top-align + scroll when it doesn't */ overflow-y: auto; /* tall slides scroll internally instead of clipping */ } .slide__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; } /* slide entrance — scoped to html.js so content is never hidden without JS */ html.js .slide__inner { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } html.js .slide.in-view .slide__inner { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .slide__inner { opacity: 1; transform: none; transition: none; } } /* charts always sit on a solid surface, never on photos or raw canvas */ .chart-card { position: relative; margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 22px; } .chart-card canvas { width: 100% !important; } .slide--ink .chart-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; } .slide--alt { background: var(--bg-alt); } .slide--ink { background: var(--ink); color: #eef1f4; } .slide--ink .eyebrow { color: var(--slate-3); } .slide--ink .eyebrow::before { background: var(--slate-3); } .slide--ink .lead { color: #c8cfd6; } .slide--ink .note { color: #aeb6bf; border-color: var(--slate-2); } .slide--ink .svc { border-top-color: rgba(255,255,255,.16); } .slide--ink .svc b { color: #fff; } .slide--ink .svc p { color: #b9c2cb; } .slide--ink .chips--ghost .chip { border-color: rgba(255,255,255,.28); color: #dfe4e9; } .slide--ink .chips--ghost .chip::before { background: var(--red-soft); } /* ---------- top bar ---------- */ .topbar { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(20px, 6vw, 90px); background: rgba(246,247,248,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .topbar__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } .topbar__brand img { height: 28px; display: block; } .topbar__word { font-size: 15px; font-weight: 800; letter-spacing: .22em; color: var(--ink); } .topbar__tag { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; } .topbar__badge { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--red); padding: 5px 12px; border-radius: 999px; } /* ---------- side dot nav ---------- */ .dots { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; gap: 14px; } .dots a { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--slate-2); background: transparent; transition: .25s; } .dots a:hover, .dots a.is-active { background: var(--red); border-color: var(--red); transform: scale(1.25); } @media (max-width: 760px){ .dots { display:none; } } /* ---------- typography ---------- */ .eyebrow { display: inline-block; font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--red); margin-bottom: 18px; } .eyebrow::before { content: ""; display: inline-block; width: 26px; height: 2px; background: var(--red); vertical-align: middle; margin-right: 10px; } h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; font-weight: 800; letter-spacing: -.02em; } h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.07; font-weight: 800; letter-spacing: -.015em; } h3 { font-size: 1.18rem; font-weight: 700; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-soft); max-width: 60ch; margin-top: 18px; } p + p { margin-top: 14px; } .accent { color: var(--red); } /* ---------- hero ---------- */ .hero { color: #fff; justify-content: flex-end; } .hero::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(53,63,78,.35) 0%, rgba(53,63,78,.55) 55%, rgba(20,24,30,.88) 100%); } .hero__bg { position:absolute; inset:0; background-size: cover; background-position: center; transform: scale(1.04); } .hero .slide__inner { position: relative; z-index: 2; } .hero h1 { color: #fff; } .hero .eyebrow { color: #fff; } .hero .eyebrow::before { background:#fff; } .hero__lead { color: #e7eaee; font-size: clamp(1.05rem,1.7vw,1.35rem); max-width: 56ch; margin-top: 20px; } .hero__meta { display:flex; gap: 40px; margin-top: 38px; flex-wrap: wrap; } .hero__meta b { display:block; font-size: 2.2rem; font-weight:800; line-height:1; } .hero__meta span { font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:#cdd3d9; } /* full-bleed photo slides (contact / section breaks): photo + dark scrim, light text */ .slide--photo { color: #eef1f4; } .slide--photo .eyebrow { color: var(--slate-3); } .slide--photo .eyebrow::before { background: var(--slate-3); } .slide--photo .lead { color: #c8cfd6; } .slide--photo .photo-bg { position:absolute; inset:0; } .slide--photo .photo-bg img { width:100%; height:100%; object-fit:cover; display:block; } .slide--photo .photo-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(38,45,56,.78) 0%, rgba(38,45,56,.86) 100%); } .slide--photo .slide__inner { position:relative; z-index:2; } /* ---------- grids & cards ---------- */ .grid { display:grid; gap: 18px; margin-top: 24px; } .grid--2 { grid-template-columns: repeat(2,1fr); } .grid--3 { grid-template-columns: repeat(3,1fr); } .grid--4 { grid-template-columns: repeat(4,1fr); } @media (max-width: 880px){ .grid--3,.grid--4,.grid--2 { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .grid--3,.grid--4,.grid--2 { grid-template-columns: 1fr; } } .card { background: var(--surface); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.6); position: relative; } .card h3 { margin-bottom: 8px; } .card p { font-size: .96rem; color: var(--ink-soft); } /* stat tiles */ .stat { background: var(--surface); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); border-top: 3px solid var(--red); } .stat b { display:block; font-size: clamp(2rem,3.4vw,2.9rem); font-weight: 800; color: var(--ink); line-height:1; } .stat span { font-size:.85rem; color: var(--ink-soft); letter-spacing:.04em; } .stat small { color: var(--slate-1); font-weight:600; } /* content + photo split: text on solid ground, photography kept sharp */ .media-split { display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: 8px; } .media-split figure { margin:0; height: 100%; min-height: 320px; max-height: 62vh; } .media-split img { width:100%; height:100%; object-fit: cover; display:block; border-radius: var(--radius); box-shadow: var(--shadow); } @media (max-width: 880px){ .media-split { grid-template-columns: 1fr; } .media-split figure { min-height: 220px; max-height: 34vh; } } /* photo strip — grounds sparse slides without putting text on photos */ .photo-strip { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 44px; } .photo-strip img { width:100%; height: clamp(120px, 20vh, 210px); object-fit: cover; display:block; border-radius: 14px; box-shadow: var(--shadow-soft); } @media (max-width: 560px){ .photo-strip { grid-template-columns: 1fr; } } /* ---------- tables ---------- */ .table { width:100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-top: 20px; } .table th, .table td { padding: 12px 22px; text-align: left; font-size: .96rem; } .table--fc th, .table--fc td { padding: 9px 22px; } .table thead th { background: var(--ink); color:#fff; font-weight:600; letter-spacing:.03em; text-transform: uppercase; font-size:.78rem; } .table tbody tr { border-top: 1px solid var(--line); } .table tbody tr:nth-child(even){ background: #f4f5f6; } .table td:last-child { text-align:right; font-weight:700; color: var(--ink); font-variant-numeric: tabular-nums; } .table .accent-row td { color: var(--red); } /* forecast comparison table: actual + forecast value columns */ .table--fc th:nth-child(n+2), .table--fc td:nth-child(n+2) { text-align:right; font-variant-numeric: tabular-nums; font-weight:700; } .table--fc td:nth-child(2) { color: var(--slate-1); } /* FY2025A actual */ .table--fc td:nth-child(3) { color: var(--ink-soft); } /* FY2026E */ .table--fc td:nth-child(4) { color: var(--ink); } /* FY2027E */ .table--fc thead th:nth-child(2) { color: var(--slate-3); } .table--fc .accent-row td:nth-child(n+2) { color: var(--red); } .table--fc tbody td:nth-child(2):not(:empty) { border-right: 1px solid var(--line); } /* fleet slide: brand wordmarks + EV chip */ .brands { display:flex; align-items:center; gap:36px; flex-wrap:wrap; } .brand-volvo { font-weight:800; letter-spacing:.3em; font-size:1.05rem; color:var(--ink); } .brand-renault { font-weight:800; letter-spacing:.2em; font-size:1.05rem; color:var(--ink); } .brand-daf { font-weight:800; font-style:italic; letter-spacing:.12em; font-size:1.15rem; color:var(--ink); } /* fleet-composition stacked bars (banks deck): 2px surface gaps between segments, direct labels inside wide segments, legend carries the full counts */ .mixbar__title { font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; } .mixbar__track { display:flex; gap:2px; height:46px; border-radius:8px; overflow:hidden; } .mixbar__seg { display:flex; align-items:center; justify-content:center; min-width:0; color:#fff; font-weight:700; font-size:.88rem; white-space:nowrap; overflow:hidden; } .mixbar__seg--ink { color:var(--ink); } .mixbar__legend { list-style:none; display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:14px; padding:0; } .mixbar__legend li { font-size:.9rem; color:var(--ink-soft); } .mixbar__legend li b { color:var(--ink); } .mixbar__legend li::before { content:""; display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--dot); margin-right:8px; vertical-align:-1px; } /* axle-split: two bars on a common baseline (fleet-composition slide) */ .axbar__row { display:flex; align-items:center; gap:12px; margin-top:10px; } .axbar__lbl { font-size:.9rem; font-weight:700; color:var(--ink-soft); width:36px; } .axbar__row b { font-size:1.05rem; font-weight:800; color:var(--ink); min-width:38px; font-variant-numeric: tabular-nums; } .axbar__track { flex:1; height:18px; border-radius:5px; background:rgba(53,63,78,.08); overflow:hidden; } .axbar__track i { display:block; height:100%; border-radius:5px; } .ev-chip { display:inline-flex; align-items:center; gap:9px; border:1.5px solid rgba(53,63,78,.3); border-radius:999px; padding:9px 18px; font-size:.9rem; font-weight:600; color:var(--ink); } .ev-chip::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--red); } /* timeline / plans */ .tl { margin-top: 36px; display:grid; gap: 0; } .tl__item { display:grid; grid-template-columns: 130px 1fr; gap: 26px; padding: 22px 0; border-top:1px solid var(--line); } .tl__item:first-child{ border-top:none; } .tl__yr { font-size:1.5rem; font-weight:800; color: var(--red); } .tl__item h3 { margin-bottom:6px; } .tl__item p { color: var(--ink-soft); font-size:.97rem; } /* chips */ .chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; } .chip { background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:.9rem; font-weight:600; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(53,63,78,.4); } .chip::before{ content:""; display:inline-block; width:7px;height:7px;border-radius:50%;background:var(--red); margin-right:9px; vertical-align:middle; } .chips--ghost .chip { background:transparent; box-shadow:none; border:1.5px solid rgba(53,63,78,.25); } /* note / disclaimer — italic, reserved for caveats and legal flavour */ .note { margin-top:22px; font-size:.85rem; color: var(--ink-soft); font-style: italic; border-left:3px solid var(--slate-3); padding-left:14px; } /* caption — plain descriptive line under a chart or figure */ .caption { margin-top:12px; font-size:.85rem; color: var(--ink-soft); } /* mission / vision panels */ .mv-label { color: var(--red); text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; } .mv-text { font-size: 1.15rem; color: var(--ink); line-height: 1.6; margin-top: 12px; } .slide--ink .mv-label { color: var(--red-soft); } .slide--ink .mv-text { color: #e8ecf0; } /* new facility hub */ .hub-big { display:block; font-size: clamp(2.4rem,4vw,3.5rem); font-weight:800; line-height:1.05; color: var(--red); letter-spacing:-.01em; } .hub-big--ink { color: var(--ink); font-size: clamp(1.9rem,3vw,2.6rem); margin-top:28px; } .hub-cap { display:block; font-size:.9rem; color:var(--ink-soft); letter-spacing:.03em; margin-top:8px; } .hub-list { list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:11px; } .hub-list li { font-size:1.02rem; font-weight:600; color:var(--ink); } .hub-list li::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red); margin-right:12px; vertical-align:middle; } .hub-list li span { color:var(--ink-soft); font-weight:500; } /* contact */ .contact { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:34px; } @media (max-width:560px){ .contact{ grid-template-columns:1fr; } } .contact .card b { display:block; color:#fff; font-size:1.15rem; } .slide--ink .card, .slide--photo .card { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#dfe4e9; box-shadow:none; } .slide--ink .card p, .slide--ink .card a, .slide--photo .card p, .slide--photo .card a { color:#c2c9d0; } .slide--photo .note { color:#aeb6bf; border-color: var(--slate-2); } .contact a { color: var(--slate-3); text-decoration:none; } .ic { width:16px; height:16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; margin-right: 8px; } /* ---------- Europe map ---------- */ .eu-label { font-family: var(--font); font-weight: 700; fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 3px; stroke-linejoin: round; } .eu-label--nordic tspan:last-child { fill: var(--red); } .eu-label--core tspan:last-child { fill: var(--slate-1); } /* typographic service columns */ .svc { border-top: 1px solid var(--line); padding-top: 24px; } .svc b { display:block; font-size:clamp(2.2rem,3.4vw,3rem); font-weight:800; line-height:1; color:var(--red); } .svc h3 { margin-top:12px; } .svc p { margin-top:8px; color:var(--ink-soft); font-size:.97rem; } /* borderless map + typographic route stats */ .map-bare svg { width:100%; height:100%; display:block; } .map-bare .land { fill:#c9cfd3; stroke:#F6F7F8; stroke-width:.7; } .map-bare .eu-nordic { fill: var(--red); } .map-bare .eu-core { fill: var(--slate-2); } .rstat b { display:block; font-size:clamp(2rem,3vw,2.8rem); font-weight:800; line-height:1; color:var(--ink); } .rstat.is-red b { color: var(--red); } .rstat span { font-size:.92rem; color:var(--ink-soft); } /* progress bar */ .progress { position:fixed; top:0; left:0; height:3px; background: var(--red); z-index:60; width:0; } /* print */ @media print { .topbar,.dots,.progress { display:none; } html { scroll-snap-type: none; } .slide { height:auto; min-height:auto; page-break-after: always; box-shadow:none; overflow:visible; } html.js .slide__inner { opacity:1 !important; transform:none !important; } body { background:#fff; } } /* utility */ .section-num { display:none; } .footer-bar { height:6px; background: var(--red-warm); }