/* ========================================================================== Divako - Colors & Type Primary look is dark mode. Light tokens included as counterpart. Sources: uploads/Divako Fargeoversikt.pdf (Pantone sheet) + Figma "Divako 2.0" page metadata. ========================================================================== */ /* Self-hosted fonts. Subset (latin + latin-ext) woff2 from Google Fonts. Inter -> --font-display (h1, .display, hero-title, diagram numerals); variable, one file/subset. Poppins-> --font-sans (body, h2-h5); static per weight. Only the weights used in the CSS are shipped. latin-ext loads on demand (e.g. Polish content) via unicode-range. Regenerate with tools/genfonts.py. Preload inter-latin.woff2 (the h1/LCP font) in each . */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latinext.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; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/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: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/poppins-latinext-400.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; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/poppins-latin-400.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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/poppins-latinext-500.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; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/poppins-latin-500.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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/poppins-latinext-600.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; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/poppins-latin-600.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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/poppins-latinext-700.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; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/poppins-latin-700.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; } :root { /* ---------- Brand ---------- */ /* Hovedfarger (primary) */ --brand-deep: #06426a; /* Pantone 7694 C - primary deep blue */ --brand-green: #04956e; /* Pantone 7724 C */ --brand-sage: #9cbeac; /* Pantone 558 C - soft secondary */ /* Støttefarger (support) */ --brand-red: #e84f3d; /* Pantone 7625 C */ --brand-orange: #f28d22; /* Pantone 1495 C */ --brand-yellow: #fdd757; /* Pantone 121 C */ /* Tints derived from deep blue (used across UI) */ --brand-deep-900: #001e30; /* rgb(0,30,48) - deepest surface */ --brand-deep-800: #062d48; --brand-deep-700: #06426a; /* = brand-deep */ --brand-deep-600: #0d5a86; --brand-deep-500: #297bce; /* accent blue strokes */ --brand-deep-400: #3b7ddd; /* rgb(59,125,221) - bright accent */ --brand-deep-300: #b0ceee; /* rgb(176,206,238) - pale blue text */ --brand-deep-200: #ccd2e3; /* rgb(204,210,227) */ /* ---------- Neutrals ---------- */ --n-0: #ffffff; --n-50: #f5f5f5; --n-100: #efefef; --n-200: #dedede; --n-300: #bdbdbd; --n-400: #9c9494; --n-500: #8c8c8c; --n-600: #525252; --n-700: #262626; --n-800: #21231e; --n-900: #111827; --n-950: #0a0a0a; /* ---------- Semantic (dark-first) ---------- */ --bg-1: var(--brand-deep-900); /* app background */ --bg-2: #062d48; /* elevated surface */ --bg-3: #0d3252; /* deeper card / topbar */ --surface-glass: rgba(59,125,221,0.12); /* glass panel (login) */ --surface-hover: rgba(255,255,255,0.06); --surface-press: rgba(255,255,255,0.03); --fg-1: #ffffff; /* primary text on dark */ --fg-2: var(--brand-deep-300); /* secondary / meta (b0ceee) */ --fg-3: rgba(255,255,255,0.55); /* tertiary, icons */ --fg-muted: rgba(255,255,255,0.52); /* >=4.5:1 on bg-1..bg-3 (WCAG AA small text) */ --fg-inverse: #111827; /* text on light surfaces */ --border-1: rgba(255,255,255,0.08); --border-2: rgba(59,125,221,0.35); /* accent borders on dark */ --border-strong: var(--brand-deep-500); --accent: var(--brand-deep-400); --accent-strong: var(--brand-deep-500); --success: var(--brand-green); --warning: var(--brand-orange); --danger: var(--brand-red); --info: var(--brand-deep-400); --critical: #bb0000; /* alarm emphasis */ /* Semantic category colors (device/data dashboards) */ --cat-water: var(--brand-deep-400); --cat-energy: var(--brand-yellow); --cat-heat: var(--brand-orange); --cat-gas: var(--brand-red); --cat-generic: var(--brand-sage); /* ---------- Radii ---------- */ --r-xs: 3px; --r-sm: 5px; --r-md: 7px; --r-lg: 10px; --r-xl: 16px; --r-2xl: 20px; --r-pill: 999px; /* ---------- Shadows ---------- */ --shadow-card: 0 4px 4px 0 rgba(0,0,0,0.25); --shadow-pop: 0 4px 4px 0 rgba(0,0,0,0.6); --shadow-inset-ring: inset 0 0 0 1px var(--border-1); --glow-accent: 0 0 0 3px rgba(59,125,221,0.25); /* ---------- Spacing (4-based) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; /* ---------- Type ---------- */ --font-sans: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-display: 'Inter', 'Poppins', sans-serif; --font-ui: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* used in dashboards */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Type scale (px values match Figma usage) */ --fs-display: 90px; /* cover title (Inter 700) */ --fs-hero: 50px; /* section hero (Inter/Poppins) */ --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 22px; --fs-h5: 18px; --fs-body-lg: 16px; --fs-body: 14px; --fs-sm: 12px; --lh-tight: 100%; --lh-snug: 120%; --lh-base: 140%; --lh-loose: 160%; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in: cubic-bezier(.4,.0,1,1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; } /* Light-mode token overrides (for light surfaces / marketing blocks) */ [data-theme="light"] { --bg-1: #f5f5f5; --bg-2: #ffffff; --bg-3: #efefef; --fg-1: #111827; --fg-2: #262626; --fg-3: #525252; --fg-muted: #8c8c8c; --border-1: #dedede; --border-2: rgba(6,66,106,0.2); } /* ========================================================================== Base element styles ========================================================================== */ html, body { background: var(--bg-1); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; } h1, .h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: -0.01em; } h2, .h2 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-snug); } h3, .h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); } h4, .h4 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-tight); } h5, .h5 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h5); line-height: var(--lh-snug); } p, .p { font-size: var(--fs-body-lg); font-weight: var(--fw-regular); line-height: var(--lh-loose); color: var(--fg-2); } small, .caption { font-size: var(--fs-sm); color: var(--fg-3); } .eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); } .display { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.02em; } .mono { font-family: var(--font-mono); font-size: var(--fs-sm); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--brand-deep-300); }