/* ========================================================================= Blacksmith Finance – Träume (traum.blacksmith-finance.de) Seiten-eigenes Stylesheet. Tokens/Reset/Fonts kommen aus brand.css (Design-System-Sync – NICHT hier duplizieren). Aufbau-Prinzip: Der Grundzustand dieser Datei ist die Variante OHNE Effekte (kein JS / prefers-reduced-motion). Die Scroll-Inszenierung wird erst durch die Klassen `fx-film` / `fx-team` am aktiviert, die main.js nur setzt, wenn sie auch laufen darf. Dadurch ist die Seite ohne JavaScript vollständig lesbar statt leer. ========================================================================= */ :root{ --shell:760px; --pad:20px; --danger:#E5484D; --danger-line:rgba(229,72,77,.55); --danger-soft:rgba(229,72,77,.12); } body{background:var(--bg-deep)} /* ---- Utilities -------------------------------------------------------- */ .sprite{position:absolute;width:0;height:0;overflow:hidden} .sr-only{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } .is-hidden{display:none!important} .shell{max-width:var(--shell);margin:0 auto;width:100%;padding-left:var(--pad);padding-right:var(--pad)} .section{padding:88px 0} /* Sanftes Einblenden. Ohne JS bleibt alles sichtbar (kein .js-anim am body). */ .js-anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .js-anim .reveal.is-visible{opacity:1;transform:none} /* ---- Header ----------------------------------------------------------- */ .site-header{ position:absolute;top:0;left:0;right:0;z-index:5; padding:18px var(--pad);pointer-events:none; display:flex;align-items:center;justify-content:space-between;gap:12px; } .site-header .logo{display:inline-flex;align-items:center;gap:10px;pointer-events:auto} .logo img{width:30px;height:30px} /* ---- Sprach-Umschalter (DE/ES/EN) -------------------------------------- */ .langswitch{position:relative;pointer-events:auto;flex:none} .langswitch-btn{ display:inline-flex;align-items:center;gap:6px; background:none;border:0;color:var(--on-dark,#fff);cursor:pointer; padding:6px 8px;border-radius:var(--radius-sm,10px);font:inherit;font-size:.85rem; font-weight:600;letter-spacing:.02em; } .langswitch-btn:hover,.langswitch-btn:focus-visible{background:var(--line-dark,rgba(255,255,255,.10))} .langswitch-btn img{display:block;width:20px;height:14px;border-radius:2px} .langswitch-btn .langswitch-code{line-height:1} .langswitch-list{ position:absolute;right:0;top:100%;margin:6px 0 0;padding:6px;list-style:none; background:var(--surface-dark,#1E1F21);border:1px solid var(--line-dark,rgba(255,255,255,.10)); border-radius:var(--radius-sm,10px);min-width:150px;box-shadow:var(--shadow-md); } .langswitch-list[hidden]{display:none} .langswitch-list a{ display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px; color:var(--on-dark,#fff);text-decoration:none;font-size:.9rem;white-space:nowrap; } .langswitch-list a img{display:block;width:20px;height:14px;border-radius:2px;flex:none} .langswitch-list a:hover,.langswitch-list a:focus-visible{background:var(--accent-soft);color:var(--accent)} .langswitch-list a[aria-current="true"]{background:var(--line-dark,rgba(255,255,255,.08));font-weight:700} /* ========================================================================= 1 · Film – Video verjüngt sich in Text ========================================================================= */ /* Grundzustand (ohne Effekt): Video als normaler Block, Texte als Überschriften. */ .film{position:relative} .film-stage{position:relative} .film-video{width:100%;height:auto;display:block} .film-mask{display:none} .film-hint{display:none} .film-copy{max-width:var(--shell);margin:0 auto;padding:56px var(--pad) 24px;text-align:center} .film-copy h1{font-size:clamp(2rem,7vw,3.4rem);font-weight:800;letter-spacing:-.03em;margin-bottom:28px} .film-copy h2{font-size:clamp(1.5rem,5vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin-bottom:28px} .film-copy h2:last-child{margin-bottom:0} /* --- aktivierter Effekt ------------------------------------------------- */ /* Die Höhe ist die Scroll-"Laufzeit" der gepinnten Bühne (main.js liest sie). */ .fx-film .film{height:340vh} .fx-film .film-stage{ position:sticky;top:0;height:100vh;height:100svh; overflow:hidden; /* Das Standbild liegt HINTER dem Video. Sollte das Video nicht laden oder der Browser Autoplay unterbinden, sind die Buchstaben damit trotzdem gefüllt – sonst stünde schwarze Schrift auf schwarzem Grund und der Text wäre schlicht unsichtbar. */ background:var(--bg-deep) url("/assets/images/traeume-poster.jpg") center/cover no-repeat; } .fx-film .film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Das Video ist 4:3. Sobald das Fenster schmaler ist, schneidet `cover` seitlich ab – auf einem hochkanten iPhone 65 % der Videobreite. Der im Video eingebrannte Text steht mittig und breit und wird dadurch unlesbar. Deshalb wird das Video dort vollständig eingepasst; der Hintergrund (Standbild) wird gleich mit umgestellt, damit beide exakt übereinanderliegen. Der maskierte Text bleibt davon unberührt: Er ist kleiner als das eingepasste Videoband und liegt weiterhin darin. */ @media (max-aspect-ratio: 4/3){ .fx-film .film-video{object-fit:contain} .fx-film .film-stage{background-size:contain} } .fx-film .film-mask{display:block;position:absolute;inset:0;width:100%;height:100%} /* Die echten Überschriften bleiben für Screenreader/SEO im DOM, verschwinden aber optisch – sichtbar ist dann nur noch der Text in der Maske. */ .fx-film .film-copy{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } .fx-film .film-hint{ display:flex;position:absolute;left:50%;bottom:26px;transform:translateX(-50%); flex-direction:column;align-items:center;gap:4px; font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--on-dark-soft);transition:opacity .4s var(--ease); } .film-hint svg{width:18px;height:18px;animation:nudge 1.9s var(--ease) infinite} .film-hint.is-gone{opacity:0} @keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} /* ========================================================================= 2 · Teambild wächst aus der Mitte nach links und rechts ========================================================================= */ .teamreveal{position:relative;background:var(--bg-deep)} .teamreveal-stage{display:grid;place-items:center} .teamreveal-frame{width:100%;overflow:hidden;line-height:0} .teamreveal-frame img{width:100%;height:100%;object-fit:cover} .fx-team .teamreveal{height:250vh} .fx-team .teamreveal-stage{ position:sticky;top:0;height:100vh;height:100svh;overflow:hidden; } .fx-team .teamreveal-frame{ --p:0; --w:calc(var(--w0) + (100vw - var(--w0)) * var(--p)); /* Startgröße: breit genug, um als Bild zu wirken, und die Höhe folgt der Breite – sonst steht am Anfang ein gestauchter Ausschnitt statt des ganzen Fotos. Der Teiler ist das Seitenverhältnis von team.jpg (16:9); bei einem Bildtausch mit anderem Format hier mitziehen. Die Deckelung auf Viewport-Höhe verhindert, dass der Start auf flachen Fenstern ausläuft. */ --w0:65vw; --h0:min(62vh, calc(var(--w0) / 1.776)); width:var(--w); height:calc(var(--h0) + (100vh - var(--h0)) * var(--p)); border-radius:calc(20px * (1 - var(--p))); box-shadow:var(--shadow-lg); } /* Im Endzustand füllt das Bild Breite UND Höhe – auf einem hochkanten Display würde ein 16:9-Foto dabei 74 % seiner Breite verlieren, die äußeren Personen wären schlicht nicht mehr im Bild. Ab einem Fenster schmaler als 3:2 wächst es deshalb nur in der Breite, die Höhe folgt dem Seitenverhältnis des Fotos. Es ist damit immer vollständig zu sehen. */ @media (max-aspect-ratio: 3/2){ .fx-team .teamreveal-frame{height:calc(var(--w) / 1.776)} } @media (max-width:820px){ .fx-team .teamreveal-frame{--w0:62vw} } /* ========================================================================= 3/4 · Aussagen ========================================================================= */ .statement{padding:120px var(--pad);text-align:center;background:var(--bg-deep)} /* Überleitung zum Teambild: klebt bewusst am folgenden Bild, damit der Satz als Übergang gelesen wird und nicht als eigenständiger Abschnitt. */ .statement--intro{padding-top:150px;padding-bottom:60px} .statement-lead{ max-width:900px;margin:0 auto; font-size:clamp(1.7rem,4.6vw,3rem);font-weight:800;letter-spacing:-.03em; line-height:1.15;color:var(--on-dark); } /* ---- Zielsetzung als Zitat --------------------------------------------- Das Zitat trägt sich allein über die Typografie: ein großes, zurück- genommenes Anführungszeichen darüber und ein feiner Strich darunter rahmen die Aussage, ohne dass eine Unterschrift nötig ist. Das Anführungszeichen ist BEWUSST eine Zeichnung (Sprite `#i-quote`) und kein Schriftzeichen. Zwei Gründe, beide praktisch erprobt: 1. Inter zeichnet das deutsche „ als zwei schräge Balken. Stark vergrößert liest sich das wie ein Darstellungsfehler, nicht wie ein Zitat. 2. „ ist ein TIEF stehendes Zeichen – seine Tinte sitzt auf der Grundlinie, und nur rund 31 % der Schriftgröße sind überhaupt Tinte. Jede Positio- nierung schiebt deshalb Leerraum an die gewünschte Stelle, während die sichtbaren Striche woanders landen (bei uns mitten in der ersten Textzeile). Mit der Zeichnung entfällt beides: Die Fläche ist exakt das, was man sieht. `aria-hidden` im Markup, damit es nicht vorgelesen wird. */ .quote{background:var(--bg-dark)} .quote-body{max-width:900px;margin:0 auto} .quote-mark{ width:clamp(52px,9vw,76px);aspect-ratio:76/54;height:auto; margin:0 auto 28px;fill:currentColor;color:var(--accent);opacity:.55; } .quote-body::after{ content:"";display:block;width:72px;height:2px;margin:38px auto 0; background:linear-gradient(90deg,transparent,var(--accent),transparent); } /* Beide Zeilen sind bewusst gleich groß; der einzige Unterschied ist die Farbe. Die Größe steht deshalb in EINER gemeinsamen Regel – sonst laufen die beiden auseinander, sobald später jemand nur eine davon anfasst. */ .quote-line,.quote-echo{ font-size:clamp(1.7rem,4.6vw,3rem);font-weight:800;letter-spacing:-.03em; line-height:1.15; } .quote-line{color:var(--on-dark)} .quote-echo{margin-top:20px;color:var(--accent)} /* ========================================================================= 5 · Formular ========================================================================= */ .lead{padding:96px 0 110px;background: radial-gradient(120% 80% at 50% 0%, rgba(55,196,241,.08), transparent 62%), var(--bg-deep); } .lead-inner{max-width:520px;margin:0 auto;padding:0 var(--pad)} /* Frage und Angebot bilden bewusst EINEN Block: Die Frage steht als Zuspitzung direkt über der Antwort, nicht mehr als eigener Abschnitt. Die Frage ist die optisch dominante Zeile und deshalb auch strukturell das

– so bleibt die Überschriften-Gliederung stimmig und der Abschnitt behält über aria-labelledby seinen sprechenden Namen. Die Antwort setzt darunter den farbigen Schlusspunkt. / / Auch hier: gleiche Größe, unterschiedliche Farbe – gemeinsam definiert. / .lead h2,.lead-answer{ font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;letter-spacing:-.03em; line-height:1.15;text-align:center; } .lead h2{color:var(--on-dark);margin-bottom:12px} .lead-answer{color:var(--accent);margin-bottom:36px} .js-anim .lead-answer{transition-delay:.12s} .lead-form{ background:var(--surface-dark);border:1px solid var(--line-dark); border-radius:var(--radius-lg);padding:26px 22px;box-shadow:var(--shadow-md); } .field{margin-bottom:14px} .field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;color:var(--ink)} .field input[type="text"],.field input[type="email"],.field input[type="tel"]{ width:100%;min-height:52px;padding:0 14px;border:1px solid var(--line-dark); border-radius:var(--radius-sm);font-size:1rem;font-family:inherit;color:var(--ink); background:var(--surface-dark2);transition:border-color var(--t-fast),box-shadow var(--t-fast); } .field input::placeholder{color:var(--ink-mute)} .field input:focus{outline:none;border-color:var(--accent)} .field input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} .field.has-error input{border-color:var(--danger-line)} .field-error{display:none;color:#FF9DA0;font-size:.78rem;font-weight:600;margin-top:6px} .field.has-error .field-error{display:block} .consent{display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px;font-size:.82rem;color:var(--on-dark-mute)} .consent input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--accent)} .consent label{cursor:pointer} .consent a{color:var(--accent);font-weight:600;text-decoration:underline} .consent a:hover{color:var(--accent-2)} .consent a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} .consent.has-error label{color:#FF9DA0} .hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none} .form-status{display:none;margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);font-size:.86rem;font-weight:600;line-height:1.4} .form-status.is-error{display:block;background:var(--danger-soft);border:1px solid var(--danger-line);color:#FF9DA0} / CTA – Brand-Primary: Cyan-Verlauf, dunkler Text, Glow / .widget-button{ width:100%;min-height:56px;display:flex;align-items:center;justify-content:center;gap:10px; background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:var(--accent-ink); border:none;border-radius:var(--radius-pill);font-weight:700;font-size:1.05rem; box-shadow:var(--shadow-accent);cursor:pointer; transition:transform var(--t-fast),filter var(--t-fast),box-shadow var(--t-fast); } .widget-button:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 16px 38px rgba(55,196,241,.42)} .widget-button:active{transform:translateY(0)} .widget-button:focus-visible{outline:3px solid var(--on-dark);outline-offset:3px} .widget-button svg{width:20px;height:20px} .widget-button[disabled]{cursor:default;transform:none} .widget-button.is-sent{ background:linear-gradient(180deg,#4FC98F,#2E9E6B);color:#04220F;box-shadow:none; } / Bestätigung nach dem Absenden – Teambild + Zusage / .lead-done{margin-top:8px;text-align:center;animation:doneIn .6s var(--ease) both} .lead-done img{ width:100%;height:auto;border-radius:var(--radius-lg); border:1px solid var(--line-dark);box-shadow:var(--shadow-lg); } .lead-done-text{ margin-top:26px;font-size:clamp(1.5rem,4.4vw,2.2rem);font-weight:800; letter-spacing:-.02em;color:var(--on-dark); } .lead-done-text:focus{outline:none} .lead-done-demo{margin-top:12px;font-size:.8rem;color:var(--warn)} @keyframes doneIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} / ========================================================================= 6 · Google-Rezensionen ========================================================================= / .proof{background:var(--bg-dark)} .proof.is-hidden{display:none} .proof h2{ font-size:clamp(1.35rem,3.4vw,2rem);font-weight:800;letter-spacing:-.02em; line-height:1.25;text-align:center;max-width:26ch;margin:0 auto 34px; } .rev-viewport{overflow:hidden} .rev-track{display:flex;transition:transform .45s ease;will-change:transform;min-height:208px} .rev-slide{flex:0 0 100%;min-width:0;display:flex;padding:4px 8px} .rev-slide .t-card{width:100%} .t-card{ background:var(--surface-dark);border:1px solid var(--line-dark);border-radius:var(--radius);box-shadow:var(--shadow-sm); padding:22px 18px;height:100%;display:flex;flex-direction:column;gap:14px;text-align:left; } .t-card .stars{display:flex;gap:3px;color:var(--accent)} .t-card .stars svg{width:18px;height:18px} .t-card blockquote{font-size:1.02rem;font-weight:600;line-height:1.4;color:var(--on-dark)} .t-card blockquote p + p{margin-top:10px} .t-card .who{display:flex;align-items:center;gap:10px;margin-top:auto} .t-card .who .av{width:42px;height:42px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent)} .t-card .who b{display:block;font-size:.9rem;color:var(--on-dark)} .t-card .who .review-source{font-size:.78rem;color:var(--accent);font-weight:600} .rev-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px} .rev-arrow{ flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-dark);background:var(--surface-dark); color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer; transition:border-color .2s,background .2s,transform .15s; } .rev-arrow:hover{border-color:var(--accent);background:var(--accent-soft)} .rev-arrow:active{transform:scale(.94)} .rev-arrow:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .rev-arrow svg{width:20px;height:20px} .rev-dots{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;max-width:240px} .rev-dot{ width:8px;height:8px;border-radius:99px;background:var(--on-dark-mute);opacity:.4;border:none;padding:0; cursor:pointer;transition:width .25s ease,opacity .25s ease,background .25s ease; } .rev-dot.active{opacity:1;background:var(--accent);width:22px} .rev-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .proof-cta{margin:0} .rev-google-btn{ display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:24px auto 0; padding:12px 20px;border:1px solid var(--line-dark);border-radius:var(--radius-sm);background:var(--surface-dark); color:var(--on-dark);font-weight:600;font-size:.92rem; transition:border-color .2s,background .2s,transform .15s,color .2s; } .rev-google-btn:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);transform:translateY(-1px)} .rev-google-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .rev-google-btn svg{width:16px;height:16px} / ========================================================================= Footer ========================================================================= / .site-footer{background:var(--bg-deep);border-top:1px solid var(--line-dark);padding:36px 0 44px} .site-footer .shell{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center} .foot-brand{font-size:.86rem;color:var(--on-dark-mute)} .foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:18px} .foot-nav a,.foot-link{ font-size:.84rem;color:var(--on-dark-soft);background:none;border:none;padding:0; font-family:inherit;text-decoration:none;transition:color var(--t-fast); } .foot-nav a:hover,.foot-link:hover{color:var(--accent)} / ========================================================================= Unterseiten: Impressum, Datenschutz, 404 Diese Seiten stammen aus der Ökosystem-Vorlage und bringen ihr eigenes Klassen-Vokabular mit (.legal, .back-link, .footer-inner …). Beim Neuschreiben dieses Stylesheets für die Landingpage waren diese Regeln nicht mitgekommen – mit sichtbarer Folge: Das SVG im Zurück-Link hatte keine Größenangabe, und weil brand.css jedem svg `max-width:100%` gibt, wurde der Pfeil auf volle Spaltenbreite aufgeblasen. Die Struktur der Unterseiten bleibt bewusst wie in allen anderen BSF-Projekten – nur der Kopf trägt zusätzlich `site-header--page`, weil der Kopf hier im normalen Fluss steht statt wie auf der Landingpage über dem Video zu schweben. Der Rechtstext in datenschutz.html zwischen den BSF-LEGAL-Markern wird gesynct und ist nicht anzufassen. ========================================================================= / .site-header--page{position:static;padding:20px 0} .site-header .header-inner{display:flex;align-items:center} / Rechtstexte stecken voller langer Komposita („Datenschutzerklärung", „Auftragsverarbeitungsvertrag"). Ohne Trennung laufen die auf schmalen Geräten seitlich aus dem Bild – und weil brand.css am body `overflow-x:hidden` setzt, wären sie dort schlicht abgeschnitten. / .legal{padding-top:44px;padding-bottom:80px;overflow-wrap:break-word;hyphens:auto} .legal h1{font-size:clamp(1.8rem,5vw,2.4rem);font-weight:800;letter-spacing:-.02em;margin-bottom:22px} .legal h2{font-size:1.15rem;font-weight:700;margin:34px 0 10px;color:var(--on-dark)} .legal h3{font-size:1rem;font-weight:700;margin:22px 0 8px;color:var(--on-dark)} .legal p,.legal li{font-size:.95rem;line-height:1.7;color:var(--on-dark-soft)} .legal p+p{margin-top:12px} .legal ul,.legal ol{margin:12px 0 12px 22px;list-style:disc} .legal ol{list-style:decimal} .legal li{margin-bottom:6px;padding:0} .legal a{color:var(--accent);text-decoration:underline} .legal a:hover{color:var(--accent-2)} .legal strong,.legal b{color:var(--on-dark)} .legal table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.9rem} .legal th,.legal td{border:1px solid var(--line-dark);padding:8px 10px;text-align:left;color:var(--on-dark-soft)} .legal th{color:var(--on-dark);font-weight:700} .legal__updated{margin-top:34px;font-size:.85rem;color:var(--on-dark-mute)} / Zurück-Link: Die Größenangabe am SVG ist der eigentliche Fix. Der Selektor ist bewusst mit `.legal` qualifiziert – sonst gewinnt die allgemeine Regel `.legal a` (höhere Spezifität) und der Link käme unterstrichen und in Cyan daher wie ein Fließtext-Link. / .legal .back-link{ display:inline-flex;align-items:center;gap:8px;margin-bottom:26px; font-size:.9rem;font-weight:600;color:var(--on-dark-soft); text-decoration:none;transition:color var(--t-fast); } .back-link svg{width:18px;height:18px;flex:none} .legal .back-link:hover{color:var(--accent)} .back-link:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px} .notfound{padding-top:96px;padding-bottom:120px;text-align:center} .notfound h1{font-size:clamp(3rem,12vw,5rem);font-weight:800;letter-spacing:-.04em;color:var(--accent);margin-bottom:8px} .notfound p{margin-bottom:28px;color:var(--on-dark-soft)} .notfound .widget-button{width:max-content;max-width:100%;margin:0 auto;padding:0 26px} .site-footer .footer-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center} .footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:18px} .footer-links a,.footer-link-btn{ font-size:.84rem;color:var(--on-dark-soft);background:none;border:none;padding:0; font-family:inherit;text-decoration:none;cursor:pointer;transition:color var(--t-fast); } .footer-links a:hover,.footer-link-btn:hover{color:var(--accent)} .footer-copy{font-size:.8rem;color:var(--on-dark-mute)} / ========================================================================= Bewegungsreduktion – Sicherheitsnetz. main.js setzt die fx-Klassen dann ohnehin nicht; falls doch, werden sie hier wieder neutralisiert. ========================================================================= */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .fx-film .film,.fx-team .teamreveal{height:auto} .fx-film .film-stage,.fx-team .teamreveal-stage{position:static;height:auto} .fx-film .film-video{position:static;width:100%;height:auto} .fx-film .film-mask,.film-hint{display:none} .fx-film .film-copy{position:static!important;width:auto;height:auto;margin:0 auto;clip:auto;white-space:normal} .fx-team .teamreveal-frame{width:100%;height:auto;border-radius:0} .film-hint svg{animation:none} .lead-done{animation:none} }