/* ========================================================================== LeFlare Fotowall – Corporate Design Farben und Schriften aus leflare.at uebernommen. ========================================================================== */ /* Die Schriften werden NICHT hier geladen, sondern von theme_head() in den jeder Seite geschrieben – so lassen sie sich im Admin umstellen. Alle Farben und Schriften unten sind nur die Ausgangswerte; der Admin ueberschreibt einzelne davon per :root-Block nach diesem Stylesheet. */ :root { --lf-black: #000000; --lf-bg: #333333; --lf-bg-deep: #1c1c1c; --lf-line: #4a4a4a; --lf-text: #d9d9d9; --lf-text-dim: #9a9a9a; --lf-white: #ffffff; --lf-accent: #fedf41; --lf-on-accent: #333333; --lf-danger: #ff6b5e; --lf-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --lf-display: 'Zalando Sans Expanded', 'Zalando Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--lf-bg); color: var(--lf-text); font-family: var(--lf-mono); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; } a { color: var(--lf-accent); text-decoration: none; } a:hover { text-decoration: underline; } .lf-h1, .lf-h2 { font-family: var(--lf-display); font-weight: 900; color: var(--lf-white); letter-spacing: -0.01em; line-height: 1.02; margin: 0 0 .6rem; text-wrap: balance; } .lf-h1 { font-size: clamp(2rem, 8vw, 3rem); } .lf-h2 { font-size: clamp(1.2rem, 5vw, 1.6rem); } .lf-lead { color: var(--lf-text); margin: 0 0 1.6rem; } .lf-kicker { color: var(--lf-accent); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .5rem; } /* --- Buttons: kantig, gelb, Mono ---------------------------------------- */ .lf-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 62px; padding: 1rem 1.4rem; border: 0; border-radius: 0; background: var(--lf-accent); color: var(--lf-on-accent); font-family: var(--lf-mono); font-size: 1rem; font-weight: 600; text-align: center; cursor: pointer; transition: filter .15s ease, transform .05s ease; -webkit-tap-highlight-color: transparent; } .lf-btn:hover { filter: brightness(1.08); text-decoration: none; } .lf-btn:active { transform: translateY(1px); } .lf-btn:disabled { opacity: .45; cursor: default; } .lf-btn--ghost { background: transparent; color: var(--lf-text); border: 1px solid var(--lf-line); font-weight: 400; min-height: 52px; } .lf-btn--ghost:hover { border-color: var(--lf-accent); color: var(--lf-accent); filter: none; } .lf-btn--danger { background: transparent; border: 1px solid var(--lf-danger); color: var(--lf-danger); } /* --- Einfache Seiten (Upload, Admin, Setup) ----------------------------- */ .lf-plain { min-height: 100dvh; display: flex; flex-direction: column; } .lf-topbar { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--lf-line); } .lf-topbar img { height: 30px; width: auto; display: block; } .lf-topbar__title { font-family: var(--lf-display); font-weight: 900; color: var(--lf-white); font-size: .95rem; letter-spacing: .02em; } .lf-sheet { width: 100%; max-width: 560px; margin: 0 auto; padding: 2rem 1.25rem 3rem; flex: 1; } .lf-sheet--wide { max-width: 1100px; } .lf-note { border-left: 3px solid var(--lf-accent); padding: .7rem 0 .7rem .9rem; margin: 1.4rem 0; color: var(--lf-text); font-size: .9rem; } .lf-note--err { border-color: var(--lf-danger); color: var(--lf-danger); } .lf-note--warn { border-color: var(--lf-accent); } .lf-foot { padding: 1.5rem 1.25rem 2rem; color: var(--lf-text-dim); font-size: .78rem; text-align: center; } code { font-family: var(--lf-mono); background: var(--lf-bg-deep); padding: .15em .4em; color: var(--lf-accent); } /* --- Setup-Checkliste ---------------------------------------------------- */ .lf-checks { list-style: none; margin: 0 0 1rem; padding: 0; } .lf-check { display: flex; gap: .9rem; padding: .75rem 0; border-bottom: 1px solid var(--lf-line); font-size: .88rem; } .lf-check__mark { font-weight: 700; color: var(--lf-accent); flex: 0 0 2rem; } .lf-check--err .lf-check__mark { color: var(--lf-danger); } .lf-check__body { display: flex; flex-direction: column; gap: .15rem; } .lf-check__body strong { color: var(--lf-white); font-weight: 600; } .lf-check__body span { color: var(--lf-text-dim); word-break: break-word; } .lf-links { list-style: none; padding: 0; margin: 0; font-size: .85rem; } .lf-links li { padding: .6rem 0; border-bottom: 1px solid var(--lf-line); } .lf-links span { display: block; color: var(--lf-text-dim); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; } .lf-links a { word-break: break-all; } /* ========================================================================== UPLOAD (Handy) ========================================================================== */ .lf-shot { position: relative; width: 100%; aspect-ratio: 3 / 4; background: var(--lf-bg-deep); border: 1px solid var(--lf-line); overflow: hidden; margin-bottom: 1.2rem; display: flex; align-items: center; justify-content: center; } .lf-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .lf-shot__hint { color: var(--lf-text-dim); font-size: .85rem; padding: 2rem; text-align: center; } .lf-actions { display: flex; flex-direction: column; gap: .7rem; } .lf-bar { height: 3px; background: var(--lf-line); margin-top: 1rem; overflow: hidden; } .lf-bar__fill { height: 100%; width: 0; background: var(--lf-accent); transition: width .2s ease; } .lf-done { text-align: center; padding: 2.5rem 0; } .lf-done__mark { font-family: var(--lf-display); font-weight: 900; font-size: 3.4rem; color: var(--lf-accent); line-height: 1; margin-bottom: 1rem; } .lf-hidden { display: none !important; } /* ========================================================================== WALL (Beamer / TV) ========================================================================== */ .lf-wall { margin: 0; height: 100dvh; width: 100vw; overflow: hidden; background: var(--lf-black); cursor: none; } .lf-host { position: fixed; inset: 0; } .lf-grid { display: grid; gap: 6px; padding: 6px; width: 100%; height: 100%; background: var(--lf-black); } .lf-tile { position: relative; overflow: hidden; background: var(--lf-bg-deep); } .lf-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .9s ease, transform 1.6s ease; will-change: opacity, transform; } .lf-tile img.is-on { opacity: 1; transform: scale(1); } /* Frisch hochgeladenes Foto bekommt einen gelben Rahmen, der ausblendet */ .lf-tile::after { content: ''; position: absolute; inset: 0; border: 0 solid var(--lf-accent); pointer-events: none; transition: border-width .35s ease, opacity 1.2s ease .8s; opacity: 0; } .lf-tile.is-fresh::after { border-width: 5px; opacity: 1; } /* -------------------------------------------------------------------------- Ansicht 2: rotierende 3D-Ringe -------------------------------------------------------------------------- */ .lf-scene { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #232323 0%, #0a0a0a 70%, #000 100%); } .lf-stage { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; } .lf-ringwrap { position: absolute; transform-style: preserve-3d; } .lf-ring { position: absolute; transform-style: preserve-3d; animation: lf-spin linear infinite; } @keyframes lf-spin { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } } .lf-slot { position: absolute; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); } .lf-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; backface-visibility: hidden; } .lf-slot img.is-on { opacity: 1; } .lf-slot::after { content: ''; position: absolute; inset: 0; border: 0 solid var(--lf-accent); pointer-events: none; opacity: 0; transition: border-width .35s ease, opacity 1.2s ease .8s; } .lf-slot.is-fresh::after { border-width: 5px; opacity: 1; } /* Dunkle Ebene in halber Tiefe – alles dahinter tritt zurueck. Billiger und ruhiger als Weichzeichnen. */ .lf-fog { position: absolute; left: -200vw; top: -200vh; width: 400vw; height: 400vh; background: rgba(0, 0, 0, .58); pointer-events: none; } /* Raender abdunkeln, damit Karten am Bildrand nicht abrupt verschwinden */ .lf-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, #000 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, #000 100%), radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.75) 100%); } /* QR-Karte in der Ring-Ansicht: fest unten rechts, ueber der Szene. Doppelte Klasse, damit die Regeln die allgemeine .lf-tile--qr schlagen – die steht weiter unten in dieser Datei. */ .lf-tile--qr.lf-qrfixed { position: fixed; /* Die Ecke setzt die Klasse lf-qrfixed--tl/tr/bl/br weiter unten. */ right: 2.2vmin; bottom: 2.2vmin; /* Hoehe explizit ausrechnen, nicht ueber aspect-ratio: eine automatische Hoehe laesst sich von den Kindern nicht in Prozent aufloesen – der Code im Inneren faellt dann auf seine Inhaltsgroesse zurueck. */ --lf-qrw: clamp(168px, 22vmin, 330px); width: var(--lf-qrw); height: calc(var(--lf-qrw) * 1.3); /* Achtung: prozentuales Padding bezieht sich bei position:fixed auf den VIEWPORT, nicht auf die Karte – 5% waeren hier fast 100 px. Deshalb rechnen wir es aus der Kartenbreite aus. */ padding: calc(var(--lf-qrw) * 0.06); z-index: 3; box-shadow: 0 20px 60px rgba(0, 0, 0, .7); } /* In welcher Ecke die feste QR-Karte klebt (Ring-Ansicht). Die jeweils andere Seite muss ausdruecklich auf auto, sonst bleibt der Standardwert von oben stehen und die Karte wird ueber die Breite gezogen. */ .lf-qrfixed--tl { top: 2.2vmin; left: 2.2vmin; right: auto; bottom: auto; } .lf-qrfixed--tr { top: 2.2vmin; right: 2.2vmin; left: auto; bottom: auto; } .lf-qrfixed--bl { bottom: 2.2vmin; left: 2.2vmin; right: auto; top: auto; } .lf-qrfixed--br { bottom: 2.2vmin; right: 2.2vmin; left: auto; top: auto; } /* Zaehler und Vollbild-Knopf weichen der QR-Karte aus */ .lf-wall--qr-bl .lf-badge { left: auto; right: 22px; } .lf-wall--qr-tr .lf-fs { right: auto; left: 18px; } .lf-wall--qr-tl .lf-fs { right: 18px; left: auto; } /* Feste QR-Kachel – wechselt nie */ /* display:block, damit die Karte innen wirklich die volle Kachel bekommt. Als Flex-Container waere sie inhaltsgetrieben und der Code wuerde auf kleinen Bildschirmen zusammenschrumpfen. */ .lf-tile--qr { background: var(--lf-accent); display: block; padding: 5%; } .lf-qrtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; width: 100%; height: 100%; container-type: inline-size; } /* Der Code bekommt die gesamte Resthoehe (flex-basis 0 + min-height 0, sonst quetscht ihn die Beschriftung auf kleinen Bildschirmen zusammen). Die Breite ergibt sich aus dem quadratischen Code, damit die weisse Flaeche eng anliegt. */ /* Quadratisch: die Hoehe kommt aus dem Flex-Rest, die Breite aus dem Seitenverhaeltnis. max-width faengt sehr schmale Karten ab; das SVG haelt sein Verhaeltnis ohnehin selbst. */ .lf-qrtile__code { background: var(--lf-white); padding: 6px; line-height: 0; flex: 0 1 auto; width: 100%; aspect-ratio: 1; min-height: 0; max-height: 100%; margin: 0 auto; box-sizing: border-box; } .lf-qrtile__code svg { width: 100%; height: 100%; display: block; } .lf-qrtile__code svg rect[fill="#000000"], .lf-qrtile__code svg path { fill: var(--lf-on-accent); } .lf-qrtile__code--text { width: 100%; padding: 8%; font-size: clamp(9px, 1.4cqw, 14px); line-height: 1.3; color: var(--lf-on-accent); word-break: break-all; text-align: center; } .lf-qrtile__label { font-family: var(--lf-mono); font-weight: 700; color: var(--lf-on-accent); text-transform: uppercase; letter-spacing: .06em; text-align: center; line-height: 1.25; font-size: clamp(9px, 5.5cqw, 20px); flex: 0 0 auto; } /* Leerer Zustand + Overlay */ .lf-empty { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; text-align: center; background: var(--lf-bg); padding: 2rem; z-index: 5; transition: opacity .6s ease; } .lf-empty img { height: 64px; } .lf-empty h1 { font-family: var(--lf-display); font-weight: 900; color: var(--lf-white); font-size: clamp(1.8rem, 5vw, 3.4rem); margin: 0; } .lf-empty p { color: var(--lf-text); margin: 0; } .lf-empty .lf-url { color: var(--lf-accent); font-weight: 600; word-break: break-all; } .lf-badge { position: fixed; left: 22px; bottom: 18px; display: flex; align-items: center; gap: .8rem; padding: .55rem .9rem; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); z-index: 4; font-size: .75rem; letter-spacing: .06em; color: var(--lf-text-dim); text-transform: uppercase; transition: opacity .4s ease; } .lf-badge img { height: 20px; } .lf-badge b { color: var(--lf-accent); font-weight: 700; } /* oben rechts, damit der Knopf der QR-Kachel unten rechts nicht im Weg steht */ .lf-fs { position: fixed; right: 18px; top: 18px; z-index: 6; background: rgba(0,0,0,.55); color: var(--lf-text); border: 1px solid var(--lf-line); padding: .5rem .8rem; font-family: var(--lf-mono); font-size: .72rem; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; opacity: 0; transition: opacity .3s ease; } .lf-wall:hover .lf-fs { opacity: 1; } /* ========================================================================== ADMIN ========================================================================== */ .lf-adminGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 1.4rem; } .lf-card { position: relative; background: var(--lf-bg-deep); border: 1px solid var(--lf-line); } .lf-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .lf-card__meta { display: flex; align-items: center; justify-content: space-between; padding: .4rem .5rem; font-size: .68rem; color: var(--lf-text-dim); } .lf-card__del { background: none; border: 0; color: var(--lf-danger); font-family: var(--lf-mono); font-size: .68rem; cursor: pointer; padding: 0; text-transform: uppercase; letter-spacing: .05em; } .lf-card.is-gone { opacity: .25; } .lf-field { width: 100%; padding: .9rem 1rem; margin-bottom: .8rem; background: var(--lf-bg-deep); border: 1px solid var(--lf-line); color: var(--lf-white); font-family: var(--lf-mono); font-size: 1rem; border-radius: 0; } .lf-field:focus { outline: 2px solid var(--lf-accent); outline-offset: -2px; } .lf-qr { background: var(--lf-white); padding: 14px; display: inline-block; line-height: 0; margin: 1rem 0; } .lf-qr svg { width: 100%; height: auto; display: block; } .lf-qr svg rect[fill="#000000"], .lf-qr svg path { fill: var(--lf-on-accent); } /* --- Reiter --------------------------------------------------------- */ .lf-tabs { display: flex; gap: 2px; margin: 1.6rem 0 1.4rem; flex-wrap: wrap; } .lf-tab { background: var(--lf-bg-deep); border: 1px solid var(--lf-line); color: var(--lf-text-dim); font-family: var(--lf-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; padding: .7rem 1.1rem; cursor: pointer; border-radius: 0; } .lf-tab.is-on { background: var(--lf-accent); border-color: var(--lf-accent); color: var(--lf-on-accent); font-weight: 700; } /* --- Formular ------------------------------------------------------- */ .lf-form { max-width: 720px; } .lf-lab { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--lf-text-dim); margin: 1rem 0 .35rem; } .lf-hint { font-size: .8rem; color: var(--lf-text-dim); margin: .6rem 0 0; } .lf-hint a { color: var(--lf-accent); } .lf-row { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; } .lf-grow { flex: 1 1 260px; min-width: 0; } .lf-field--color { padding: .3rem; height: 52px; cursor: pointer; } .lf-check { display: flex; align-items: center; gap: .7rem; margin: .9rem 0; cursor: pointer; font-size: .9rem; } .lf-check input { width: 20px; height: 20px; accent-color: var(--lf-accent); } .lf-actions--row { flex-direction: row; flex-wrap: wrap; margin-top: 2rem; } .lf-actions--row .lf-btn { width: auto; flex: 0 0 auto; padding-inline: 2rem; } /* --- Logo ------------------------------------------------------------ */ .lf-logoBox { flex: 0 0 160px; height: 90px; background: var(--lf-bg-deep); border: 1px solid var(--lf-line); display: flex; align-items: center; justify-content: center; padding: .8rem; font-size: .72rem; color: var(--lf-text-dim); } .lf-logoBox img { max-width: 100%; max-height: 100%; object-fit: contain; } /* --- Farbfelder ------------------------------------------------------ */ .lf-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; margin-top: .5rem; } .lf-color { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--lf-line); padding: .5rem .7rem; cursor: pointer; } .lf-color input[type=color] { width: 40px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; } .lf-color span { flex: 1; font-size: .78rem; } .lf-color code { font-size: .7rem; background: none; color: var(--lf-text-dim); } /* --- Vorschau -------------------------------------------------------- */ .lf-preview { border: 1px solid var(--lf-line); margin-top: 1.2rem; } .lf-preview__head { background: var(--lf-line); color: var(--lf-text); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; padding: .35rem .7rem; } .lf-preview__body { background: var(--lf-bg); padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem; } .lf-preview__body b { font-family: var(--lf-display); font-weight: 900; font-size: 1.5rem; color: var(--lf-white); } .lf-preview__body span { color: var(--lf-text); font-size: .85rem; } .lf-preview__body em { background: var(--lf-accent); color: var(--lf-on-accent); font-style: normal; font-weight: 600; font-size: .85rem; padding: .5rem .9rem; align-self: flex-start; } /* --- Eckenwahl fuer den QR-Code -------------------------------------- */ .lf-corners { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: .6rem; margin-top: .4rem; } .lf-corner { display: block; cursor: pointer; } .lf-corner input { position: absolute; opacity: 0; width: 0; height: 0; } .lf-corner__box { display: block; position: relative; height: 62px; border: 1px solid var(--lf-line); background: var(--lf-bg-deep); } .lf-corner__box i { position: absolute; width: 34%; height: 40%; background: var(--lf-line); transition: background .15s ease; } .lf-corner--tl .lf-corner__box i { top: 8%; left: 6%; } .lf-corner--tr .lf-corner__box i { top: 8%; right: 6%; } .lf-corner--bl .lf-corner__box i { bottom: 8%; left: 6%; } .lf-corner--br .lf-corner__box i { bottom: 8%; right: 6%; } .lf-corner input:checked + .lf-corner__box { border-color: var(--lf-accent); } .lf-corner input:checked + .lf-corner__box i { background: var(--lf-accent); } .lf-corner input:focus-visible + .lf-corner__box { outline: 2px solid var(--lf-accent); outline-offset: 2px; } .lf-corner__txt { display: block; font-size: .72rem; color: var(--lf-text-dim); margin-top: .3rem; text-align: center; } .lf-corner input:checked ~ .lf-corner__txt { color: var(--lf-accent); } .lf-stats { display: flex; gap: 2rem; margin: 1.2rem 0; flex-wrap: wrap; } .lf-stat b { display: block; font-family: var(--lf-display); font-weight: 900; font-size: 1.8rem; color: var(--lf-accent); line-height: 1; } .lf-stat span { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--lf-text-dim); } @media (prefers-reduced-motion: reduce) { .lf-tile img { transition: opacity .2s linear; transform: none; } }