/* ============================================================================ LOOOM — Design System Foundations colors_and_type.css "Inspired by innovation." · die Digitalisierungsfabrik LOOOM GmbH — 3D building digitization, BIM & spatial intelligence (Linz, AT) Brand source: looom-brand-platform 2022 (Firma Design). Typeface: Titillium Web — the brand's chosen face, loaded from Google Fonts. Import this file + the Google Fonts link below to inherit the full system. ============================================================================ */ /* @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700;900&display=swap'); ^ prefer a in the document for performance; kept here for reference. The UI/body face is Titillium Web (Google CDN) — the brand book's chosen "support source", fully weighted (200–900). Below we ALSO self-host the ORIGINAL Titillium (TitilliumMaps26L) the user supplied — this is literally "the original font of the logo". Only two weights exist (thin "1 wt" + medium "500 wt"), so it is used as the DISPLAY / LOGO / voice face via --font-logo, while Titillium Web carries the broad weight range for headings + body. url()s are relative to THIS file (project root → fonts/). */ @font-face { font-family: "Titillium Maps"; src: url("fonts/TitilliumMaps26L004.otf") format("opentype"); font-weight: 200 350; /* "1 wt" — thin → light */ font-style: normal; font-display: swap; } @font-face { font-family: "Titillium Maps"; src: url("fonts/TitilliumMaps26L002.otf") format("opentype"); font-weight: 400 600; /* "500 wt" — regular → medium */ font-style: normal; font-display: swap; } :root { /* --------------------------------------------------------------------------- COLOR — Primary: a vivid royal indigo / blue-violet. Used flat on hero panels and as gradient-to-charcoal. The brand keeps a deliberately reduced palette to strengthen recall of this single signature color. --------------------------------------------------------------------------- */ --indigo-900: #1A1656; /* deepest — chart darks, shadow indigo */ --indigo-800: #221E5C; --indigo-700: #2A2570; /* billboard / print indigo (paper-true) */ --indigo-600: #322B8C; --indigo-500: #3A33A8; /* ★ PRIMARY brand indigo */ --indigo-400: #524BC6; /* screen indigo, interactive hover */ --indigo-300: #8B86D8; /* mid periwinkle */ --indigo-200: #B7B6E0; /* ★ lavender — light tint panels, secondary fills */ --indigo-100: #D9D8EE; --indigo-050: #EEEEF8; /* NEUTRALS — cool near-black to a warm paper off-white. The dark world is the brand's home; cream is reserved for light surfaces. */ --ink: #0C0C10; /* page black — the void behind mesh/waves */ --charcoal-900: #121217; --charcoal-800: #1A1A20; --charcoal-700: #232329; /* raised card on dark */ --charcoal-600: #2D2B31; /* card / business-card dark */ --charcoal-500: #3A3A42; /* hairline borders on dark */ --gray-500: #6E6E76; /* muted body on dark */ --gray-400: #9A9AA2; /* secondary text */ --gray-300: #C4C4CA; --paper: #F4F2EB; /* ★ warm off-white — light slides / surfaces */ --cream: #ECEAE2; /* logo cream, foil-white on dark */ --white: #FFFFFF; /* SEMANTIC — derived from the palette, not invented. */ --bg: var(--ink); --bg-raised: var(--charcoal-700); --bg-light: var(--paper); --surface-card: var(--charcoal-600); --fg1: var(--cream); /* primary text on dark */ --fg2: var(--gray-400); /* secondary text on dark */ --fg3: var(--gray-500); /* tertiary / captions */ --fg-on-light-1: var(--charcoal-900); /* primary text on paper */ --fg-on-light-2: #55555E; /* secondary text on paper */ --accent: var(--indigo-500); --accent-hover: var(--indigo-400); --accent-soft: var(--indigo-200); --border: var(--charcoal-500); --border-light: #D8D6CE; --focus-ring: var(--indigo-400); /* SIGNATURE GRADIENTS ------------------------------------------------------ */ /* Hero: vivid indigo bleeding into charcoal (top-left light → bottom-right dark) */ --grad-hero: linear-gradient(135deg, var(--indigo-500) 0%, var(--indigo-700) 45%, var(--charcoal-800) 100%); /* Panel: pure indigo wash used on solid color blocks */ --grad-panel: linear-gradient(150deg, var(--indigo-400) 0%, var(--indigo-700) 100%); /* The brand's signature divider bar: silver → indigo, sits under taglines */ --grad-rule: linear-gradient(90deg, var(--gray-300) 0%, var(--indigo-400) 55%, var(--indigo-700) 100%); /* Duotone overlay applied to B&W photography */ --grad-duotone: linear-gradient(135deg, rgba(58,51,168,0.62), rgba(18,18,23,0.55)); /* --------------------------------------------------------------------------- TYPE — Titillium Web throughout. Single-family system; weight + case carry the hierarchy. Headlines BOLD, subheads SemiBold, body Regular, the "voice" taglines set in airy Light with wide tracking. --------------------------------------------------------------------------- */ --font-sans: "Titillium Web", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: var(--font-sans); /* The ORIGINAL logo typeface — use for the wordmark, big display & the light voice line. Falls back to Titillium Web where heavier weights are needed. */ --font-logo: "Titillium Maps", "Titillium Web", system-ui, sans-serif; --font-mono: "DM Mono", "SFMono-Regular", ui-monospace, "Roboto Mono", monospace; --fw-light: 300; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* Type scale (1.250 major-third, 16px base) */ --text-xs: 0.75rem; /* 12 — labels, captions */ --text-sm: 0.875rem; /* 14 — fine print, meta */ --text-base: 1rem; /* 16 — body */ --text-md: 1.125rem; /* 18 — lead body / subhead */ --text-lg: 1.5rem; /* 24 — H4 */ --text-xl: 2rem; /* 32 — H3 */ --text-2xl: 2.75rem; /* 44 — H2 */ --text-3xl: 3.75rem; /* 60 — H1 */ --text-4xl: 5.5rem; /* 88 — display / poster */ --leading-tight: 1.05; --leading-snug: 1.18; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* taglines, eyebrows */ --tracking-wider: 0.14em; /* uppercase micro-labels */ /* --------------------------------------------------------------------------- SPACING — 4px base grid --------------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* RADII — the brand is precise and geometric: tight radii, never pill-soft except for true circles (the logo ring, icon badges, scroll cue). */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; /* large framed surfaces (website outer frame) */ --radius-full: 999px; /* BORDERS */ --hairline: 1px solid var(--border); --hairline-light: 1px solid var(--border-light); --frame: 1px solid rgba(236,234,226,0.22); /* thin luminous outline used on dark */ /* ELEVATION — restrained. Dark UI leans on borders + subtle lifts, not heavy drop shadows. Light slides use crisp grounded shadows. */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 8px 24px rgba(0,0,0,0.45); --shadow-lg: 0 24px 60px rgba(0,0,0,0.55); --shadow-glow: 0 0 0 1px rgba(82,75,198,0.5), 0 8px 40px rgba(58,51,168,0.35); /* MOTION — measured and engineered. Smooth eases, no bounce. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; } /* ============================================================================ SEMANTIC TYPOGRAPHY CLASSES ============================================================================ */ .looom-display { font-family: var(--font-logo); font-weight: var(--fw-bold); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; } h1, .h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } h2, .h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-2xl); line-height: var(--leading-snug); } h3, .h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-xl); line-height: var(--leading-snug); } h4, .h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-lg); line-height: var(--leading-snug); } /* The brand "voice" line — light, airy, wide-tracked, often with the silver→indigo rule beneath. Set in the ORIGINAL Titillium (thin "1 wt") for true logo-matched character. */ .tagline { font-family: var(--font-logo); font-weight: var(--fw-light); font-size: var(--text-xl); letter-spacing: var(--tracking-wide); line-height: var(--leading-snug); } /* Uppercase eyebrow / micro-label */ .eyebrow { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg2); } p, .body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-base); line-height: var(--leading-relaxed); text-wrap: pretty; } .lead { font-size: var(--text-md); font-weight: var(--fw-regular); line-height: var(--leading-normal); color: var(--fg2); } .caption { font-size: var(--text-sm); color: var(--fg3); } code, .mono { font-family: var(--font-mono); font-size: 0.9em; } /* The signature divider rule (silver → indigo). Place under a tagline. */ .looom-rule { height: 4px; width: 200px; border: 0; background: var(--grad-rule); border-radius: var(--radius-full); } /* Skip-to-content link — off-screen until focused (keyboard a11y). */ .skip-link { position: absolute; left: 8px; top: -56px; z-index: 1000; padding: 10px 16px; background: var(--accent, #524BC6); color: #fff; text-decoration: none; border-radius: 8px; transition: top 0.15s ease; } .skip-link:focus { top: 8px; }