/* =========================================================================== Amorazza - Startseite: der Weg zum Selbsttest (V595) --------------------------------------------------------------------------- Zwei Aufgaben: 1. den Kasten gestalten 2. zwei Regeln aus photo-reel.css retten, die dieser Kasten bricht MUSS ALS LETZTES STYLESHEET GELADEN WERDEN (siehe $extra_css in index.php). =========================================================================== */ /* ALLE Farben mit RUECKFALLWERT: var(--rose-400, #d4537e). Ohne den zweiten Wert wird die ganze Regel ungueltig, sobald die Variable fehlt - der Rahmen verschwindet und der Link faellt auf Browserblau zurueck. Genau das ist mir im Pruefstand passiert, weil dort tokens.css nicht liegt. Christians eigene Stylesheets machen es ueberall so; hier hatte ich es vergessen. */ /* --- 1 Der Kasten -------------------------------------------------------- */ /* Gestaltet wie .benefits-box aus launch.css: derselbe Hauch Rot innen (5 Prozent), derselbe 2-Pixel-Rahmen in --rose-400, dieselbe Rundung. Kein gefuellter Knopf: der gefuellte gehoert dem Formular weiter unten ("Wunschnamen kostenlos sichern"). Zwei volle Rotflaechen auf einer Seite wuerden um dieselbe Aufmerksamkeit streiten - und das Formular soll sie behalten. */ body.page-launch .test-teaser { display: block; /* V666: position bleibt - sie traegt die beiden auslaufenden Linien aus V665. Das z-index von V600 ist weg: es hielt allein die ueberstehende Hand ueber dem Countdown, und die gibt es nicht mehr. Nachgemessen, dass sich am Stapel nichts aendert. */ position: relative; /* Ohne diese Zeile kommen Polsterung und Rahmen auf die max-width obendrauf: 560 + 2x22 + 2x2 = 608 Pixel. Im Browser nachgemessen - die Seite setzt box-sizing nicht durchgaengig. */ box-sizing: border-box; margin: 22px auto 0; /* V595: weniger Polsterung, weil nur noch eine Zeile darin steht - sonst wirkt sie in der Flaeche verloren. */ padding: 15px 22px; font-size: var(--fs-strong, 1.05rem); font-weight: 600; line-height: 1.35; color: var(--rose-600, #993556); /* V671 (Christian, 11.08.): 640 statt 560 - "so breit machen wie alles darueber". Auf index.php stehen Anmeldebox, 600.000 und der Reise-Teaser alle auf 640px (launch.css und vision-label.css); der Testknopf war der einzige mit 560 und sprang dadurch ein. AUF index2.php AENDERT DAS AB 960px NICHTS: dort setzt launch-desktop.css fuer den Rasterbereich "test" max-width: 100%. Darunter, einspaltig, greift der Wert von hier - und dort deckelt der Behaelter ohnehin frueher. Nachgemessen. */ max-width: 640px; background: rgba(212, 83, 126, 0.05); /* V665 (Christian, 11.08.): DERSELBE AUFBAU WIE DER WEG ZU was-ist-amorazza.php (V661/V664). Der geschlossene 2px-Rahmen ist weg - Christian ueber genau diese Form: "keinen Rahmen um den Button, der ist haesslich". Statt dessen die Klammer auf beiden Seiten, gleiche Staerke und Farbe wie dort, und die Rundung von 12 auf 8 Pixel, damit beide Kaesten gleich sind. */ border: 0; border-left: 3px solid var(--rose-400, #d4537e); border-right: 3px solid var(--rose-400, #d4537e); border-radius: 8px; text-align: center; text-decoration: none; transition: background .2s, border-color .2s; } /* V665: die zwei duennen roten Linien, oben und unten, mittig voll und nach beiden Seiten auslaufend - dieselbe Methodik wie beim Weg zu was-ist-amorazza.php (V664) und dort wiederum woertlich aus .sp-kernsatz in pages/spiegel.css uebernommen. Verlauf unveraendert: 0 - voll bei 30 - voll bei 70 - 0. Einzug 20 Prozent je Seite, wie dort. position: relative steht an diesem Kasten schon (wegen der ueberstehenden Hand) - hier ist also KEINE Zeile dafuer noetig. pointer-events: none, damit die Linien den Klick nicht abfangen. Kein eigener z-index an den Linien - gemessen steht dort "auto", und sie liegen trotzdem richtig ueber der Flaeche. Ich hatte hier zuerst etwas anderes behauptet und beim Nachmessen gemerkt, dass die Zeile gar nicht gesetzt ist. */ body.page-launch .test-teaser::before, body.page-launch .test-teaser::after { content: ""; position: absolute; left: 20%; right: 20%; height: 1px; pointer-events: none; background: linear-gradient(to right, rgba(212, 83, 126, 0) 0%, rgba(212, 83, 126, 1) 30%, rgba(212, 83, 126, 1) 70%, rgba(212, 83, 126, 0) 100%); } body.page-launch .test-teaser::before { top: 0; } body.page-launch .test-teaser::after { bottom: 0; } /* V666: die Regeln fuer die Mauszeigerhand sind ENTFERNT - die Hand selbst ist aus index2.php raus (Christian, 11.08.). Das z-index am Kasten ist damit ebenfalls entfallen: es stand nur dafuer da, dass der Countdown-Abschnitt die ueberstehende Hand nicht ueberdeckt. Es steht nichts mehr ueber. position: relative BLEIBT - daran haengen seit V665 die beiden auslaufenden Linien. */ body.page-launch .test-teaser:hover, body.page-launch .test-teaser:focus-visible { background: rgba(212, 83, 126, 0.10); border-color: var(--rose-600, #993556); } /* V595: EINE Zeile statt zwei. Der Kasten traegt jetzt nur noch die Frage - deshalb Schrift und Farbe direkt am Verweis, ohne innere Elemente. */ @media (max-width: 480px) { body.page-launch .test-teaser { padding: 16px 16px; } } /* --- 2 Die geretteten Regeln --------------------------------------------- */ /* photo-reel.css setzt beides an ".reel-hint + .countdown-section". Der Kasten steht jetzt dazwischen, die Nachbarschaft ist gebrochen. Ohne die folgenden zwei Regeln faellt der Sektionsabstand weg und der Browser-Standardabstand der Titelzeile schlaegt wieder durch - genau die Fehlerklasse, gegen die photo-reel.css in vier Runden gekaempft hat (V234, V236, V237, V541). Deshalb hier woertlich dasselbe, nur mit dem neuen Nachbarn. */ /* V659: Der neue Kasten steht ab jetzt ZWISCHEN dem Test-Knopf und dem Countdown. Damit ist ".test-teaser + .countdown-section" nicht mehr wahr, und ohne die folgenden Regeln faellt der Sektionsabstand weg - genau der Fehler, den V595 hier schon einmal geloest hat. Beide Nachbarschaften stehen jetzt da: die alte fuer den Fall, dass der neue Kasten einmal entfaellt, und die neue fuer heute. */ body.page-launch .test-teaser + .countdown-section, body.page-launch .wia-teaser + .countdown-section { padding-top: var(--sec-gap, 40px); } .test-teaser + .countdown-section .countdown-title, .wia-teaser + .countdown-section .countdown-title { margin-top: 0; } /* Und der Abstand zwischen den beiden Kaesten am Handy: der neue bringt sein eigenes margin-top von 22px mit, wie der Test-Knopf. */