/* ══════════════════════════ global.css ══════════════════════════ SCHRITT 1: Reset, Navbar, Kontakt-Knopf, Burger, Mobile-Overlay, Footer und ein provisorisches Layout für die leeren Abschnitte. Reihenfolge in der Datei = Reihenfolge auf der Seite. Wer etwas sucht, scrollt dorthin, wo es auch optisch steht. ═══════════════════════════════════════════════════════════════ */ /* ═════════════════════ 1. Reset & Grundlagen ═════════════════════ */ /* border-box heisst: width ist die Aussenkante inklusive Padding und Rahmen. Ohne das wird jede Breitenrechnung zum Ratespiel. */ *,*::before,*::after{box-sizing:border-box} html{ /* Ankerlinks gleiten, statt zu springen. */ scroll-behavior:smooth; /* Ohne diese Zeile verschwindet das Sprungziel unter der fixen Navbar. scroll-padding sagt dem Browser: "diese Zone oben ist verdeckt". */ scroll-padding-top:calc(var(--nav-h) + var(--gutter) + 8px); /* clip statt hidden: fängt waagerechte Überschwinger ab, macht das Element aber nicht zum Scroll-Container (hidden täte das). */ overflow-x:clip; /* Reserviert den Platz der Scrollleiste dauerhaft. Damit springt das Layout nicht um ~15px zur Seite, wenn das Menü den Scroll sperrt. */ scrollbar-gutter:stable; -webkit-text-size-adjust:100%; } /* Scroll-Sperre für das offene Mobile-Menü. Eine Zeile, gesetzt von js/nav.js. Die Scrollposition bleibt dabei einfach stehen. Es gibt also auch nichts wiederherzustellen. */ html.menu-open{overflow:hidden} body{ margin:0; background:var(--bg); color:var(--ink); font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:clamp(16px,1.05vw,17px); line-height:1.6; -webkit-font-smoothing:antialiased; } /* Der Fokusring ist die einzige Rückmeldung, die Tastaturnutzende bekommen. :focus-visible statt :focus. So erscheint er bei Tab, aber nicht bei jedem Mausklick. */ :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; } /*
hat tabindex="-1" für den Skip-Link. Ohne diese Zeile malt Chrome dann einen Fokusring um die halbe Seite. */ #main:focus{outline:none} img,svg{max-width:100%} .wrap{ width:min(100% - var(--gutter) * 2, var(--wrap-max)); margin-inline:auto; } /* Unsichtbar, bis jemand Tab drückt. Dann springt er hervor. :focus zusätzlich zu :focus-visible, weil bei programmatischem Fokus nicht überall :focus-visible greift. */ .skip-link{ position:fixed;top:10px;left:10px;z-index:200; transform:translateY(-160%); padding:10px 16px;border-radius:var(--radius-button); background:var(--ink);color:#fff; font-size:14px;font-weight:500;text-decoration:none; transition:transform .2s var(--settle); } .skip-link:focus, .skip-link:focus-visible{transform:none} /* ═════════════════════════ 2. Navbar ═════════════════════════════ Zwei Ebenen: .nav-shell klebt oben und regelt nur den Abstand nach oben, .navbar ist die Leiste und morpht. */ .nav-shell{ position:fixed;inset:0 0 auto 0;z-index:100; padding-top:0; /* Auf Geräten mit Notch rutscht die Leiste aus der abgerundeten Ecke. Wirkt nur zusammen mit viewport-fit=cover im . */ padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); transition:padding-top var(--dur-out) var(--morph); } /* Gescrollt: die Pill rückt 14px vom Rand ab und schwebt. */ .nav-shell.is-scrolled{ padding-top:14px; transition:padding-top var(--dur-in) var(--morph); } /* Ruhezustand: volle Breite, transparent, kein Schatten. Die Breite kommt aus einer Variablen, die js/nav.js setzt. 100% würde die Scrollleiste mitzählen und einen Überschwinger geben. */ .navbar{ width:var(--nav-w-top,100%); margin:0 auto; height:var(--nav-h); padding:0 var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:24px; background:transparent; border-radius:0; /* Schatten schon hier deklarieren, nur unsichtbar: Ein Übergang von "kein box-shadow" zu "box-shadow" kann der Browser nicht animieren, von transparent zu sichtbar schon. */ box-shadow:0 1px 0 rgba(26,26,26,0), 0 0 0 rgba(26,26,26,0); transition: width var(--dur-out) var(--morph), padding var(--dur-out) var(--morph), height var(--dur-out) var(--morph), border-radius var(--dur-out) var(--morph), background-color .38s var(--morph), box-shadow .42s var(--morph); } /* Gescrollt: schwebende Pill mit Milchglas. */ .is-scrolled .navbar{ width:var(--nav-w-scrolled,560px); height:58px; padding:0 9px 0 20px; border-radius:var(--radius-button); /* .78 statt .55 Deckkraft: darunter fiel der Kontrast der Nav-Links über hellem Grund unter die geforderten 4.5:1. */ background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, var(--shadow-xl); transition: width var(--dur-in) var(--morph), padding var(--dur-in) var(--morph), height var(--dur-in) var(--morph), border-radius var(--dur-in) var(--morph), background-color .3s var(--morph), box-shadow .52s var(--morph); /* Schatten läuft leicht nach */ } /* Browser ohne backdrop-filter: solide statt durchsichtig. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .is-scrolled .navbar{background:var(--surface)} } /* Wer durchscheinende Flächen abgeschaltet hat, bekommt sie nicht. Die Einstellung gibt es, weil Inhalt hinter Milchglas für manche Menschen schwer lesbar bis übelkeitserregend ist. */ @media (prefers-reduced-transparency:reduce){ .is-scrolled .navbar{ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; } } /* ═══════════════════════ 3. Wortmarke ════════════════════════════ Der Punkt existiert genau einmal und wechselt seinen Platz. Ruhezustand ist ganz normaler Text im Fluss. Ohne JS, ohne geladene Schrift steht dort korrekt "Amin Letaief.". Der Zielzustand ist reine Layoutangabe (order + Breite). Die Bewegung dorthin macht FLIP in js/nav.js: Positionen vorher und nachher messen, Differenz als transform setzen, auf null laufen lassen. */ .brand{ position:relative; display:flex;align-items:baseline; /* Breite aus JS. Der auto-Fallback greift, solange nicht gemessen ist. Dann steht der Name einfach in seiner natürlichen Breite da. */ width:var(--bw-long,auto); /* Bringt das Tippziel auf über 24px Höhe (WCAG 2.2, 2.5.8). Nur oben/unten, denn seitliches Padding würde die gemessene Breite verfälschen. */ padding-block:4px; font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif; font-weight:600;font-size:var(--brand-fs);letter-spacing:-.015em;line-height:1.2; color:var(--hero-ink);text-decoration:none; /* pre: das Leerzeichen-Span behält seine Breite. */ white-space:pre; transition:width var(--dur-out) var(--morph), color .3s ease; } .is-scrolled .brand{ width:var(--bw-short,auto); transition:width var(--dur-in) var(--morph), color .3s ease; } .b-part{flex:none;transition:transform var(--dur-out) var(--morph), opacity .14s ease} .is-scrolled .b-part{transition:transform var(--dur-in) var(--morph), opacity .14s ease} /* Der Punkt ist rot, weil er als einziges Element beim Wandern die Wortmarke quert. In Schwarz würde er mit den Buchstaben verschmelzen. --accent-ink statt --accent: der Punkt ist Text, und --accent liegt exakt auf der 4.5:1-AA-Grenze (siehe tokens.css). */ .b-dot{color:var(--accent-ink)} /* Zielzustand "A. Letaief": der Punkt rückt per order vor die Lücke, "min" verliert seine Layoutbreite und blendet aus. */ .is-scrolled .b-a{order:1} .is-scrolled .b-min{order:2;width:0;opacity:0} .is-scrolled .b-dot{order:2} .is-scrolled .b-sp{order:3} .is-scrolled .b-last{order:4} /* Für Messungen und den ersten FLIP-Frame: alles steht still. */ .no-anim,.no-anim *{transition:none!important} /* ════════════════════════ 4. Nav-Links ═══════════════════════════ */ .nav-links{ display:flex;align-items:center;gap:30px; margin:0;padding:0;list-style:none; transition:gap var(--dur-out) var(--morph); } .is-scrolled .nav-links{gap:22px;transition:gap var(--dur-in) var(--morph)} .nav-link{ display:block;text-decoration:none; /* 14.5px Text ergibt ~18px Zeilenhöhe. Zu wenig. Mit padding-block sind es 28px und damit über den 24 CSS-Pixeln aus WCAG 2.2. */ padding-block:5px; font-size:14.5px;font-weight:400;line-height:1.25;color:var(--hero-muted); transition:color .22s ease, font-weight .22s ease, transform .25s var(--settle); } /* Reserviert im Voraus die Breite des FETTEN Textes. Ohne diesen Trick würde beim Aktivwerden eines Links die ganze Reihe um ein paar Pixel verrutschen. Der Text steckt in data-label im HTML, visibility:hidden hält ihn aus dem Screenreader heraus. */ .nav-link::after{ content:attr(data-label); display:block;height:0;overflow:hidden;visibility:hidden; font-weight:600; } .nav-link:hover{color:var(--hero-ink);transform:translateY(-1px)} .nav-link.is-active{color:var(--accent-ink);font-weight:600} .is-scrolled .nav-link{color:var(--muted)} .is-scrolled .nav-link:hover{color:var(--ink)} /* .nav-link.is-active und .is-scrolled .nav-link haben dieselbe Spezifität (je zwei Klassen). Ohne diese Zeile gewinnt beim Scrollen die graue Grundfarbe, weil sie im Quellcode weiter unten steht, und der aktive Link verliert sein Rot. Eine Klasse mehr entscheidet den Gleichstand. */ .is-scrolled .nav-link.is-active{color:var(--accent-ink)} /* ══════════════════════ 5. Kontakt-Knopf ═════════════════════════ Zwei Textebenen übereinander plus ein roter Punkt, der beim Hover zur Füllfläche aufgeht. overflow:hidden schneidet alles am Rand ab. */ .cta{ position:relative;display:block;overflow:hidden;flex:none; width:var(--cta-w);height:var(--cta-h);padding:0; border:1.5px solid var(--accent);border-radius:var(--radius-button); background:transparent; text-decoration:none;cursor:pointer; -webkit-tap-highlight-color:transparent; } .cta-iris{ position:absolute;left:var(--iris-x);top:50%; width:8px;height:8px;border-radius:50%; background:var(--accent); transform:translate(-50%,-50%) scale(1); transition:width .34s var(--settle), height .34s var(--settle), transform .34s var(--settle), background-color .3s ease; } /* will-change nur solange jemand wirklich draufzeigt. Dauerhaft gesetzt hielte es für jeden Knopf eine eigene Grafikebene im Speicher. */ .cta:hover .cta-iris,.cta:focus-visible .cta-iris{will-change:transform} .cta-face{ position:absolute;inset:0; display:flex;align-items:center;justify-content:center;gap:7px; font-size:14px;font-weight:500;letter-spacing:.01em; transition:transform .33s var(--settle), opacity .26s ease; } .cta-face.idle{color:var(--accent-ink);transform:translateX(0);opacity:1} .cta-face.over{color:#fff;transform:translateX(115%);opacity:0} .cta-face svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Der Pfeil läuft dem Text minimal hinterher. */ .cta-face.over svg{transform:translateX(7px);transition:transform .4s var(--settle) .04s} /* :focus-visible überall mitgeführt. Sonst passiert bei Tastaturbedienung nichts und der Knopf sieht kaputt aus. */ .cta:hover .cta-iris,.cta:focus-visible .cta-iris{ width:var(--iris-size);height:var(--iris-size); transform:translate(-50%,-50%) scale(1.8); } .cta:hover .cta-face.idle,.cta:focus-visible .cta-face.idle{transform:translateX(115%);opacity:0} .cta:hover .cta-face.over,.cta:focus-visible .cta-face.over{transform:translateX(0);opacity:1} .cta:hover .cta-face.over svg,.cta:focus-visible .cta-face.over svg{transform:translateX(0)} .cta:active{transform:scale(.97);transition:transform .12s ease} /* ═══════════════════════════ 6. Burger ═══════════════════════════ Zwei Striche, keine drei: der mittlere ist beim X ohnehin überflüssig, und ohne ihn ist der Übergang eine reine Drehung. */ .burger{ display:none;position:relative;flex:none; /* 44px ist das Standard-Tippziel, bequem über den 24px Minimum. */ width:44px;height:44px;padding:0;margin-right:-9px; border:0;background:none;cursor:pointer; -webkit-tap-highlight-color:transparent; } .burger-bar{ position:absolute;left:50%;top:50%; width:22px;height:2px;border-radius:2px;background:var(--hero-ink); transition:transform .42s var(--spring), background-color .3s ease; } /* 50ms Versatz: die Striche schwenken nacheinander ein, nicht als Block. */ .burger-bar:nth-child(1){transform:translate(-50%,-50%) translateY(-4px);transition-delay:.05s} .burger-bar:nth-child(2){transform:translate(-50%,-50%) translateY(4px);transition-delay:0s} .burger.is-open .burger-bar:nth-child(1){transform:translate(-50%,-50%) rotate(45deg);transition-delay:0s} .burger.is-open .burger-bar:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg);transition-delay:.05s} /* ═══════════════════════ 7. Mobile-Overlay ═══════════════════════ z-index 90 liegt UNTER der Navbar (100). Absicht: der Burger bleibt sichtbar und bedienbar, um das Menü wieder zu schliessen. */ .menu{ position:fixed;inset:0;z-index:90; display:flex;align-items:center;justify-content:center; /* Querformat und kleine Displays: lieber scrollbar als abgeschnitten. */ overflow-y:auto;overscroll-behavior:contain; padding:88px 24px calc(32px + env(safe-area-inset-bottom)); background:var(--surface); opacity:0;transform:scale(.97);visibility:hidden; /* visibility mit Verzögerung: erst ausblenden, dann verstecken. Ohne die .45s wäre das Element sofort weg und die Animation nicht zu sehen. */ transition:opacity .3s ease, transform .42s var(--spring), visibility 0s linear .45s; } .menu.is-open{opacity:1;transform:scale(1);visibility:visible;transition-delay:0s,0s,0s} .menu-inner{display:flex;flex-direction:column;align-items:center;gap:26px;margin:auto} .menu-link{ padding:4px 8px; font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif; font-size:28px;font-weight:500;letter-spacing:-.015em; color:var(--muted);text-decoration:none; } .menu-link.is-active{color:var(--accent-ink);font-weight:600} .menu-cta{display:block;margin-top:16px} /* Der Inhalt läuft gestaffelt nach, statt als ein Block mitzuskalieren. */ .menu-link,.menu-cta{ opacity:0;transform:translateY(12px); transition:opacity .22s ease, transform .28s var(--settle); } .menu.is-open .menu-link,.menu.is-open .menu-cta{ opacity:1;transform:none; transition:opacity .3s ease, transform .5s var(--spring); } /* nth-of-type statt nth-child: zählt nur die -Geschwister. Kommt später eine Trennlinie dazu, verschiebt sich die Staffelung nicht. */ .menu.is-open .menu-link:nth-of-type(1){transition-delay:.08s} .menu.is-open .menu-link:nth-of-type(2){transition-delay:.13s} .menu.is-open .menu-link:nth-of-type(3){transition-delay:.18s} .menu.is-open .menu-link:nth-of-type(4){transition-delay:.23s} .menu.is-open .menu-link:nth-of-type(n+5){transition-delay:.26s} .menu.is-open .menu-cta{transition-delay:.29s} /* Der Knopf ist hier grösser. Nur die vier Variablen ändern sich. */ .menu .cta{--cta-w:158px;--cta-h:50px;--iris-x:24px;--iris-size:178px} .menu .cta-face{font-size:15px} /* Menü offen: die Navbar geht sichtbar in die Ruhelage zurück, damit Pill und Overlay nicht übereinander liegen. */ .menu-open .nav-shell.is-scrolled{padding-top:0;transition:padding-top var(--dur-out) var(--morph)} .menu-open .nav-shell.is-scrolled .navbar{ width:var(--nav-w-top,100%); border-radius:0; box-shadow:none; transition: width var(--dur-out) var(--morph), padding var(--dur-out) var(--morph), height var(--dur-out) var(--morph), border-radius var(--dur-out) var(--morph), box-shadow .3s var(--morph); } /* ═══════════════════ 8. Abschnitte (provisorisch) ════════════════ SCHRITT 1: Die Abschnitte sind leer und dienen nur als Scrollstrecke. Diese Regeln fliegen raus, sobald echter Inhalt da ist. */ main section{ min-height:100svh; /* svh, nicht vh: Browserleisten auf Mobile */ padding:calc(var(--nav-h) + var(--gutter)) var(--gutter) var(--gutter); display:flex;align-items:center; border-bottom:1px solid var(--hairline); } /* tabindex="-1" macht die Section zum Ankerziel (siehe HTML), holt aber keinen Tab-Stopp. Deshalb ist kein sichtbarer Ring nötig. Gleiches Muster wie #main:focus weiter oben. */ main section:focus{outline:none} main section h1, main section h2{ margin:0; font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif; font-size:clamp(32px,6vw,72px);font-weight:600;letter-spacing:-.025em; color:var(--hairline); /* blass: es ist ja nur ein Marker */ } /* ═════════════════════════ 9. Footer ═════════════════════════════ */ .site-footer{ padding:32px 0 calc(32px + env(safe-area-inset-bottom)); font-size:.9rem;color:var(--muted); } .footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px} .footer-copy{margin:0} /* ═══════════════════════ 10. Breakpoints ═════════════════════════ */ /* Unter 641px: Links und Knopf raus, Burger rein. */ @media (max-width:640px){ .nav-links,.navbar>.cta{display:none} .burger{display:block} .navbar{height:var(--nav-h);padding:0 var(--gutter)} .is-scrolled .navbar{height:56px;padding:0 14px 0 20px} .menu-open .nav-shell.is-scrolled .navbar{padding:0 18px;height:66px} } /* Handy im Querformat: wenig Höhe, also enger. */ @media (max-width:640px) and (max-height:520px){ .menu-inner{gap:16px} .menu-link{font-size:22px} .menu .cta{--cta-h:44px;--cta-w:148px;--iris-size:168px} } /* Ab 641px gibt es das Overlay nicht mehr. display:none nimmt es auch aus dem Tab-Lauf, falls jemand mit offenem Menü das Fenster aufzieht. */ @media (min-width:641px){ .menu{display:none} } /* ══════════════════ 11. Reduzierte Bewegung ══════════════════════ Hier ist fast jede Animation eine Verschiebung, also genau das Muster, das bei manchen Menschen Schwindel auslöst. Wer die Systemeinstellung gesetzt hat, bekommt sie deshalb nicht gedämpft, sondern gar nicht. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0s!important; scroll-behavior:auto!important; } }