/* ========================================================================= appdevelopmentrl.eu — shared styles Design language: "oscilloscope" — an independent developer's instrument panel. Ink-navy canvas, dual-phosphor accents (cyan + violet), monospace used only where it carries real data (App IDs, tags, readouts). --------------------------------------------------------------------- THEME: dark is default. Adding class="light" on switches to light. LANG: handled in JS via data-en / data-de attributes. ========================================================================= */ /* ----- Design tokens: DARK (default) ----- */ :root { --bg: #0B1220; --bg-2: #0E1626; --surface: #141E33; --surface-2: #1A2740; --line: #25324D; --text: #EAF0FA; --muted: #93A0BA; --phosphor: #5FD3DE; /* primary beam — cyan */ --beam: #9E8BF3; /* secondary beam — violet */ --phosphor-soft: rgba(95, 211, 222, 0.14); --beam-soft: rgba(158, 139, 243, 0.14); --shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.75); --ring: rgba(95, 211, 222, 0.55); --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --maxw: 1120px; --radius: 16px; --radius-lg: 22px; } /* ----- Design tokens: LIGHT ----- */ html.light { --bg: #F2F4F3; --bg-2: #EAEEEC; --surface: #FFFFFF; --surface-2: #F4F6F8; --line: #E1E5EB; --text: #141B29; --muted: #566072; --phosphor: #0C93A2; --beam: #6A57D6; --phosphor-soft: rgba(12, 147, 162, 0.10); --beam-soft: rgba(106, 87, 214, 0.10); --shadow: 0 16px 40px -26px rgba(20, 30, 60, 0.35); --ring: rgba(12, 147, 162, 0.5); } /* ----- Reset & base ----- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; transition: background-color .35s ease, color .35s ease; overflow-x: hidden; } /* faint grid texture on the page background */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; opacity: .18; mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 100%); } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.02em; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* utility: mono eyebrow label */ .eyebrow { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--phosphor); margin: 0 0 14px; } /* ========================= HEADER / NAV ========================= */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } .brand svg { width: 30px; height: 30px; flex: none; } .brand b { font-weight: 600; } .brand .dot { color: var(--phosphor); } .controls { display: flex; align-items: center; gap: 10px; } /* language segmented control */ .lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); } .lang button { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; padding: 7px 12px; border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: color .2s, background-color .2s; } .lang button[aria-pressed="true"] { color: var(--bg); background: var(--phosphor); } html.light .lang button[aria-pressed="true"] { color: #fff; } /* theme toggle */ .theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .2s, transform .2s; } .theme-toggle:hover { border-color: var(--phosphor); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .moon { display: none; } html.light .theme-toggle .sun { display: none; } html.light .theme-toggle .moon { display: block; } /* keyboard focus */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; } /* ========================= HERO ========================= */ .hero { padding: 84px 0 64px; } .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); margin-bottom: 20px; } .hero h1 .accent { background: linear-gradient(90deg, var(--phosphor), var(--beam)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lead { font-size: 1.12rem; color: var(--muted); max-width: 46ch; margin: 0 0 28px; } .stats { display: flex; gap: 30px; flex-wrap: wrap; } .stat .n { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; } .stat .l { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* oscilloscope screen holding the animated Lissajous signature */ .scope { position: relative; aspect-ratio: 1 / 1; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(120% 120% at 50% 0%, var(--surface-2), var(--bg-2)); box-shadow: var(--shadow), inset 0 0 60px rgba(0,0,0,.35); overflow: hidden; } .scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .scope .readout { position: absolute; left: 16px; bottom: 14px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; } .scope .corner { position: absolute; top: 14px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--phosphor); box-shadow: 0 0 12px var(--phosphor); animation: blink 2.4s steps(1) infinite; } @keyframes blink { 0%,60%{opacity:1} 61%,100%{opacity:.25} } /* ========================= BUTTONS ========================= */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 500; font-size: .96rem; padding: 12px 22px; border-radius: 999px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .18s, box-shadow .2s, background-color .2s, border-color .2s; } .btn-primary { background: var(--phosphor); color: #04141a; } html.light .btn-primary { color: #fff; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--phosphor); } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line); } .btn-ghost:hover { border-color: var(--phosphor); transform: translateY(-2px); } .hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; } /* ========================= SECTION SHELL ========================= */ section.block { padding: 70px 0; } .section-head { margin-bottom: 40px; } .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); } .section-head p { color: var(--muted); max-width: 52ch; margin: 12px 0 0; } /* ========================= APP GRID ========================= */ .app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .app-card { position: relative; display: flex; gap: 18px; align-items: flex-start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: inherit; transition: transform .2s, border-color .2s, box-shadow .2s; overflow: hidden; } .app-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(140% 90% at 100% 0%, var(--phosphor-soft), transparent 60%); opacity: 0; transition: opacity .25s; } .app-card:hover { transform: translateY(-4px); border-color: var(--phosphor); box-shadow: var(--shadow); } .app-card:hover::after { opacity: 1; } .app-card .icon { width: 72px; height: 72px; border-radius: 18px; flex: none; border: 1px solid var(--line); } .app-card .meta { flex: 1; min-width: 0; } .app-card .meta h3 { font-size: 1.22rem; margin-bottom: 4px; } .app-card .tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--beam); display: inline-block; margin-bottom: 8px; } .app-card .desc { color: var(--muted); font-size: .94rem; margin: 0; } .app-card .go { position: absolute; right: 22px; bottom: 22px; color: var(--phosphor); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; opacity: 0; transform: translateX(-4px); transition: .2s; } .app-card:hover .go { opacity: 1; transform: translateX(0); } /* ========================= ABOUT STRIP ========================= */ .about { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); } .about .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; } .about p { color: var(--muted); margin: 0 0 16px; } .about .facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .about .facts li { display: flex; gap: 12px; font-size: .95rem; } .about .facts .k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--phosphor); min-width: 96px; padding-top: 3px; } /* ========================= APP DETAIL PAGE ========================= */ .back-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; margin: 34px 0 22px; } .back-link:hover { color: var(--phosphor); } .app-hero { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; padding-bottom: 34px; } .app-hero .big-icon { width: 128px; height: 128px; border-radius: 30px; border: 1px solid var(--line); box-shadow: var(--shadow); } .app-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 6px; } .app-hero .subtitle { color: var(--muted); font-size: 1.1rem; margin: 0 0 14px; } .app-hero .badges { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .pill { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); } .pill.on { color: var(--beam); border-color: color-mix(in srgb, var(--beam) 45%, transparent); } .shots { display: flex; gap: 18px; overflow-x: auto; padding: 8px 4px 24px; scroll-snap-type: x mandatory; } .shots img { width: 232px; flex: none; border-radius: 22px; border: 1px solid var(--line); scroll-snap-align: start; } .app-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; padding-top: 8px; } .app-body h2 { font-size: 1.4rem; margin-bottom: 14px; } .app-body p { color: var(--muted); } .feature-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; } .feature-list li { position: relative; padding-left: 26px; color: var(--text); } .feature-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--phosphor); } .side-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 24px; } .side-card h3 { font-size: 1.05rem; margin-bottom: 12px; } .side-card .row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .9rem; } .side-card .row:first-of-type { border-top: 0; } .side-card .row .k { color: var(--muted); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; } /* optional video block — hidden until you add a src (see README) */ .video-block { margin: 34px 0 0; } .video-block video, .video-block .video-placeholder { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--bg-2); } .video-placeholder { aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; } /* ========================= FORM (contact) ========================= */ .form-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 30px; max-width: 560px; } .field { margin-bottom: 18px; } .field label { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .field input, .field textarea { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color .2s; resize: vertical; } .field input:focus, .field textarea:focus { border-color: var(--phosphor); outline: none; } .form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .email-inline { font-family: var(--font-mono); font-size: .9rem; color: var(--phosphor); text-decoration: none; overflow-wrap: anywhere; } .copied-note { font-family: var(--font-mono); font-size: .72rem; color: var(--beam); opacity: 0; transition: opacity .2s; } .copied-note.show { opacity: 1; } /* ========================= LEGAL / PROSE ========================= */ .prose { max-width: 760px; } .prose h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 8px; } .prose h2 { font-size: 1.3rem; margin: 34px 0 10px; } .prose h3 { font-size: 1.05rem; margin: 22px 0 8px; } .prose p, .prose li { color: var(--muted); } .prose a { color: var(--phosphor); overflow-wrap: anywhere; } .prose .placeholder { display: inline-block; font-family: var(--font-mono); font-size: .92em; background: var(--beam-soft); color: var(--beam); padding: 1px 8px; border-radius: 6px; border: 1px dashed color-mix(in srgb, var(--beam) 45%, transparent); } .note { border: 1px solid var(--line); border-left: 3px solid var(--beam); background: var(--surface); border-radius: 12px; padding: 16px 18px; margin: 26px 0; font-size: .92rem; color: var(--muted); } .note strong { color: var(--text); } /* ========================= FOOTER ========================= */ .site-footer { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: 40px; } .site-footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 40px; padding-bottom: 40px; } .site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; } .site-footer a { color: var(--muted); text-decoration: none; font-size: .92rem; } .site-footer a:hover { color: var(--phosphor); } .site-footer .made { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; } /* ========================= RESPONSIVE ========================= */ @media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; } .scope { max-width: 420px; margin: 0 auto; } .app-grid { grid-template-columns: 1fr; } .about .wrap { grid-template-columns: 1fr; gap: 28px; } .app-hero { grid-template-columns: 1fr; text-align: left; } .app-body { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 520px) { body { font-size: 16px; } .wrap { padding: 0 18px; } /* etwas mehr nutzbare Breite */ .hero { padding: 56px 0 40px; } .site-header .wrap { height: 58px; } /* App-Detailseite: Icon kompakter, damit die Headline führt */ .app-hero { gap: 20px; padding-bottom: 26px; } .app-hero .big-icon { width: 96px; height: 96px; border-radius: 24px; } /* Formular: weniger Innenabstand auf schmalen Screens */ .form-card { padding: 22px 18px; } /* Screenshots: Snap-Punkte am Seitenrand ausrichten */ .shots { scroll-padding-left: 18px; } } /* sehr schmale iPhones (SE / Mini, 320–380px) */ @media (max-width: 380px) { .brand span { font-size: .88rem; } /* Schriftzug passt neben die Controls */ .brand { gap: 9px; } .brand svg { width: 26px; height: 26px; } .lang button { padding: 7px 10px; } .theme-toggle { width: 34px; height: 34px; } .shots img { width: 208px; } } /* ========================= REDUCED MOTION ========================= */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto !important; transition: none !important; } }