:root { --color-bg: #ffffff; --color-ink: #0050a0; --color-muted: #9a9a9a; --color-border: #0050a0; --color-placeholder: #e6e6e6; --color-placeholder-hover: #dcdcdc; --bar-height: 44px; --bar-height-top: calc(var(--bar-height) + 20px); --font-ui: 'Roboto', Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-ui); font-weight: 400; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* Bilingual content: EN is the default/fallback, DE shows when html[data-lang="de"] */ /* scoped to body so this never matches itself and hides the whole page */ body [data-lang="de"] { display: none; } html[data-lang="de"] body [data-lang="en"] { display: none; } html[data-lang="de"] body [data-lang="de"] { display: inline; } .lang-toggle { margin-left: 16px; display: inline-flex; align-items: center; gap: 4px; } .lang-toggle__sep { color: var(--color-muted); } .lang-toggle__btn { background: none; border: none; padding: 0; margin: 0; font-family: var(--font-ui); font-size: inherit; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); cursor: pointer; transition: color .15s ease; } .lang-toggle__btn:hover, .lang-toggle__btn:focus-visible { color: #FF6699; } .lang-toggle__btn[aria-pressed="true"] { color: var(--color-ink); } .bar { position: fixed; left: 0; right: 0; height: var(--bar-height); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--color-bg); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; z-index: 10; } .bar--top { top: 0; height: var(--bar-height-top); align-items: center; border-bottom: 1px solid var(--color-border); } .bar--top > * { transform: translateY(10px); } .bar--bottom { bottom: 0; border-top: 1px solid var(--color-border); } .bar__item { white-space: nowrap; } .bar__nav { display: flex; align-items: baseline; gap: 28px; } .bar__item--link { cursor: pointer; position: relative; } .bar__item--link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: #FF6699; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .bar__item--link:hover, .bar__item--link:focus-visible { color: #FF6699; } .bar__item--link:hover::after, .bar__item--link:focus-visible::after { transform: scaleX(1); } .cta-button { background: var(--color-ink); color: #ffffff; font-family: var(--font-ui); font-weight: 400; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; padding: 8px 18px; border-radius: 999px; transform: translateY(-8px); transition: background .15s ease; } .cta-button:hover { background: #FF6699; } .bar__toggle { display: none; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; width: 22px; height: 22px; padding: 0; background: none; border: none; cursor: pointer; } .bar__toggle-line { display: block; width: 100%; height: 1px; background: var(--color-ink); transition: transform .2s ease, opacity .2s ease, width .2s ease; } .bar__toggle-line:nth-child(2) { width: 65%; } .bar__toggle.is-active .bar__toggle-line { width: 100%; } .bar__toggle.is-active .bar__toggle-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .bar__toggle.is-active .bar__toggle-line:nth-child(2) { opacity: 0; } .bar__toggle.is-active .bar__toggle-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .content { padding-top: calc(var(--bar-height-top) + 64px); padding-bottom: calc(var(--bar-height) + 64px); max-width: 1800px; margin: 0 auto; } .intro { text-align: center; padding: 0 24px 72px; } .intro__title { margin: 0; font-weight: 400; font-size: clamp(40px, 6vw, 88px); letter-spacing: -0.01em; display: flex; align-items: center; justify-content: center; gap: 0.2em; flex-wrap: wrap; } .intro__logo { height: clamp(32px, 4.8vw, 70px); width: auto; display: block; } .intro__tagline { margin: 10px 0 0; font-family: 'Madimi One', cursive; font-weight: 400; font-size: clamp(16.5px, 1.76vw, 22px); color: var(--color-ink); letter-spacing: 0.01em; } .intro__title-suffix { line-height: 1; } .hero-media { padding: 0 32px; margin-bottom: 32px; } .placeholder--hero { aspect-ratio: 12 / 5; overflow: hidden; } .hero-media__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .grid { display: flex; gap: 32px; padding: 0 32px; align-items: flex-start; } .grid__col { flex: 1; display: flex; flex-direction: column; gap: 32px; min-width: 0; } .placeholder { width: 100%; overflow: hidden; background: var(--color-placeholder); transition: background .15s ease; } .placeholder img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .placeholder:hover { background: var(--color-placeholder-hover); } .has-js .placeholder { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease, background .15s ease; } .has-js .placeholder.is-visible { opacity: 1; transform: translateY(0); } .grid__col .tile:nth-child(1) .placeholder { transition-delay: 0s; } .grid__col .tile:nth-child(2) .placeholder { transition-delay: .08s; } .grid__col .tile:nth-child(3) .placeholder { transition-delay: .16s; } .grid__col .tile:nth-child(4) .placeholder { transition-delay: .24s; } .grid__col .tile:nth-child(5) .placeholder { transition-delay: .32s; } .grid__col .tile:nth-child(6) .placeholder { transition-delay: .4s; } .grid__col .tile:nth-child(7) .placeholder { transition-delay: .48s; } .grid__col .tile:nth-child(8) .placeholder { transition-delay: .56s; } .tile { margin: 0; } .tile-number { margin: 10px 0 0; display: flex; align-items: baseline; gap: 6px; font-family: var(--font-ui); font-weight: 400; font-size: 12px; letter-spacing: 0.08em; color: var(--color-ink); } .tile-number__id { white-space: nowrap; } .tile-number__name { color: var(--color-ink); } .tile-number__name::before { content: "— "; } .tile-number__name:empty { display: none; } @media (prefers-reduced-motion: reduce) { .has-js .placeholder { opacity: 1; transform: none; transition: none; } } .placeholder--tall { aspect-ratio: 4 / 5; } .placeholder--mid { aspect-ratio: 4 / 4.4; } .placeholder--short { aspect-ratio: 4 / 3.4; } /* Nav collapses to hamburger earlier than the general mobile layout — a narrowed desktop window or tablet is wider than a phone but still too narrow for "Linelobs Character Design" + full nav in one row. */ @media (max-width: 1024px) { .bar__toggle { display: flex; } .bar__nav { display: none; position: fixed; top: var(--bar-height-top); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px 20px 28px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); transform: none; } .bar__nav.is-open { display: flex; } .bar__nav .cta-button { transform: none; } } @media (max-width: 720px) { .hero-media { padding: 0 20px; margin-bottom: 20px; } .placeholder--hero { aspect-ratio: 4 / 5; } .grid { flex-direction: column; padding: 0 20px; } .grid__col { gap: 20px; } .bar { padding: 0 16px; font-size: 10px; } .cta-button { font-size: 10px; padding: 7px 14px; } .content { padding-top: calc(var(--bar-height-top) + 40px); padding-bottom: calc(var(--bar-height) + 40px); } } /* Community page (#ColorYourLob fan gallery) */ .community-templates { max-width: 1800px; margin: 0 auto 64px; } .community-templates__heading { font-family: 'Madimi One', cursive; font-weight: 400; font-size: clamp(24px, 2.8vw, 34px); color: var(--color-ink); text-align: center; margin: 0 0 14px; } .community-templates__grid { margin-bottom: 40px; } .community-template__caption { margin-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; letter-spacing: 0.06em; } .community-template__name { color: var(--color-ink); white-space: nowrap; } .community-template__download { color: var(--color-ink); cursor: pointer; white-space: nowrap; transition: color .15s ease; } .community-template__download:hover, .community-template__download:focus-visible { color: #FF6699; } .community-intro { max-width: 700px; margin: 0 auto 64px; padding: 0 32px; text-align: center; } .community-intro__headline { font-family: 'Madimi One', cursive; font-weight: 400; font-size: clamp(26px, 2.8vw, 36px); color: #FF6699; margin: 0 0 20px; } .community-intro__text { font-size: 16px; line-height: 1.7; max-width: 700px; margin: 0 auto 40px; padding: 0 32px; text-align: center; } .community-intro__actions { margin-bottom: 24px; } .community-intro__actions .cta-button { transform: none; display: inline-block; } .community-intro__howto { font-size: 16px; line-height: 1.7; color: var(--color-muted); text-align: left; padding: 0 32px; } .community-intro__howto strong { color: var(--color-ink); font-weight: 400; } .community-gallery { margin-bottom: 32px; } .tile-number--fan .tile-number__id { color: #FF6699; } .community-cta { position: relative; } .community-cta__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-family: 'Madimi One', cursive; font-weight: 400; font-size: 34px; color: #ffffff; } @media (max-width: 720px) { .community-intro { padding: 0 20px; margin-bottom: 40px; } .community-intro__howto { padding: 0 20px; } } /* About page (3-column split: text / index / photo, reusing the homepage grid) */ .about-split { max-width: 1800px; margin: 0 auto 88px; } .about-split__text { font-size: 17px; line-height: 1.75; max-width: 480px; margin: -0.5em 0 0; } .about-split__index { display: flex; flex-direction: column; gap: 18px; margin-top: -3px; } .about-split__index-row { display: flex; align-items: baseline; gap: 16px; font-size: 13px; letter-spacing: 0.06em; } .about-split__index-row-id { color: var(--color-ink); white-space: nowrap; width: 56px; } .about-split .tile-number__name { font-family: 'Madimi One', cursive; font-size: 18px; } .about-split .tile-number__name::before { font-family: var(--font-ui); } @media (max-width: 720px) { .about-split__text { max-width: none; } } /* Imprint page */ .imprint { max-width: 760px; margin: 0 auto 88px; padding: 0 32px; } .imprint h1 { font-family: 'Madimi One', cursive; font-weight: 400; font-size: clamp(28px, 3vw, 36px); color: var(--color-ink); margin: 0 0 32px; } .imprint h2 { font-family: var(--font-ui); font-weight: 400; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); margin: 0 0 10px; } .imprint address, .imprint p { font-style: normal; font-size: 15px; line-height: 1.75; color: var(--color-ink); margin: 0 0 28px; } .imprint a { text-decoration: underline; text-underline-offset: 2px; } .imprint a:hover { color: #FF6699; } .imprint__back { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } @media (max-width: 720px) { .imprint { padding: 0 20px; } } /* Characters page concept draft */ .concept-note { max-width: 700px; margin: 0 auto 64px; padding: 16px 24px; text-align: center; border: 1px dashed var(--color-muted); } .concept-note__text { font-size: 14px; line-height: 1.65; color: var(--color-muted); } .concept-note__text strong { color: var(--color-ink); } .characters-concept-section { max-width: 1800px; margin: 0 auto 96px; } .characters-concept-section__heading { font-family: 'Madimi One', cursive; font-weight: 400; font-size: clamp(26px, 2.8vw, 36px); color: var(--color-ink); text-align: center; margin: 0 0 14px; padding: 0 32px; } .characters-concept-section__subtext { font-size: 16px; line-height: 1.7; max-width: 700px; margin: 0 auto 40px; padding: 0 32px; text-align: center; color: var(--color-muted); } .placeholder--labeled { position: relative; display: flex; align-items: center; justify-content: center; } .placeholder__label { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 20px; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--color-muted); } .placeholder__label strong { font-family: var(--font-ui); font-weight: 400; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); } .moment-tag { font-family: var(--font-ui); font-weight: 400; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #FF6699; } /* About page — inline email link in index list */ .about-split__index-row a { text-decoration: underline; text-underline-offset: 2px; } .about-split__index-row a:hover { color: #FF6699; }