/* Theme Name: Nonstop Berlin Theme URI: https://nonstopberlin.de Author: Steve (GROSSDENKEN Cockpit) Description: Eigenstaendiges Theme fuer Nonstop Berlin e.V. Portiert aus dem von Luca freigegebenen Design-Prototyp (25.07.2026). Kein Eltern-Theme, damit kein fremdes CSS dazwischenfunkt. Version: 1.0.0 Requires at least: 6.5 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: nsb Tags: basketball, verein, one-page */ /* ========================================================================= Nonstop Berlin e.V. – Brand-Fundament (gilt fuer alle Seiten) Farben/Logo: 02_Nonstop-Berlin/05_Media/brand.md Enthaelt: Tokens, Reset, Navigation N1, Hero, Buttons, Sektions-Header, Platzhalter-Optik, Footer. Seiten-spezifisches CSS: assets/home.css bzw. assets/weg.css ========================================================================= */ /* ============ Vereinsschrift: Literata (selbst gehostet) ============ Von Luca am 04.09.2026 aus vier freien Serifen gewaehlt. SIL Open Font License, liegt in assets/fonts/ – Herkunft und Begruendung dort in HERKUNFT.md. Variable Schrift: EINE Datei je Zeichensatz deckt 200–900 ab, deshalb kein zweites @font-face fuers Fett. font-display:swap, damit der Text sofort steht. Nichts davon kommt von einem fremden Server – das ist Absicht (kein Cookie-Banner). Die erweiterte Datei laedt der Browser nur, wenn ein Zeichen daraus vorkommt. */ @font-face{ font-family:"Literata"; src:url("assets/fonts/Literata-latin.woff2") format("woff2"); font-weight:200 900;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Literata"; src:url("assets/fonts/Literata-latin-ext.woff2") format("woff2"); font-weight:200 900;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ============ Design-Tokens (Brand-Kit brand.md) ============ */ :root{ --green: #003C2E; /* Waldgrün – Primär */ --orange: #F7921F; /* Orange – Akzent */ --cream: #F5F1DC; /* Cremeweiß – Hintergrund */ --green-soft: #0A4A3A; --green-deep: #002A20; --green-line: rgba(0,60,46,.18); /* --green-mute und --orange-deep: am 06.09.2026 angehoben (t-3095). Beide reissen in der alten Fassung die WCAG-Schwelle 4,5:1 fuer kleinen Text, und zwar auf ALLEN drei Untergruenden dieser Seite: --green-mute war rgba(0,60,46,.62) -> 3,93 / 3,83 / 3,73 --orange-deep war #B35B00 -> 4,47 / 4,19 / 3,94 (Reihenfolge: Karte #FBF8EA · Creme #F5F1DC · Creme-2 #EFEAD2.) Geaendert wird die VARIABLE, nicht die fuenf bzw. sieben Fundstellen – sonst steht derselbe Fehler beim naechsten Gebrauch wieder da. */ --green-mute: rgba(0,60,46,.72); /* 5,21 / 5,03 / 4,87 */ --card: #FBF8EA; --cream-2: #EFEAD2; /* leicht abgedunkeltes Creme für Wechsel-Sektionen */ --orange-deep:#9A4E00; /* abgedunkeltes Orange für kleinen Text: 5,69 / 5,34 / 5,01 */ --win-bg: rgba(247,146,31,.14); --radius: 12px; --nav-h: 70px; /* Schrift steht fest (Luca, 04.09.2026) – der A/B/C-Umschalter ist ersatzlos raus. Georgia und Iowan sind nur noch Rueckfall, falls die eigene Datei nicht laedt. --font-text traegt den Fließtext, --font-ui die kleinen Versal-Etiketten, Knoepfe, Navi und Formularfelder: genau die Aufteilung, die Luca im Vergleich ausgewaehlt hat. */ --font-display: "Literata",Georgia,"Iowan Old Style",serif; --font-text: "Literata",Georgia,"Iowan Old Style",serif; --font-ui: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --display-transform: none; --display-spacing: -0.015em; --display-weight: 700; } *{margin:0;padding:0;box-sizing:border-box} body{ font-family:var(--font-text); /* Literata hat eine Achse fuer die optische Groesse: kleiner Text bekommt kraeftigere Striche, grosse Ueberschriften feinere. Kostet nichts extra. */ font-optical-sizing:auto; background:var(--cream); color:var(--green); line-height:1.6; font-size:16px; } h1,h2,h3,.display{ font-family:var(--font-display); text-transform:var(--display-transform); letter-spacing:var(--display-spacing); font-weight:var(--display-weight); line-height:1.05; } a{color:inherit} img,svg{max-width:100%} section{padding:84px 20px} /* Sprungziele nicht unter die klebende Navi rutschen lassen */ section[id],footer[id]{scroll-margin-top:calc(var(--nav-h) + 8px)} /* ...ausser den Abschnitten, die eine ganze Bildschirmseite sind. Die halten den Platz fuer die Navi seit t-3097 SELBST frei (Innenabstand oben = --nav-h), und das Sprungpolster kam obendrauf: der Abschnitt landete 79 px zu tief im Bild (gemessen 06.09.2026, secTopImBild 79 statt 0). Am Spielplan kostete das eine sichtbare Zeile - 11 statt 12 -, auf einem knapperen Bildschirm waere es die zehnte Mannschaft der Tabelle gewesen. Die Klasse traegt die Begruendung, damit ein VIERTER solcher Abschnitt nicht vergessen wird: wer eine Bildschirmseite ist, haelt selbst frei. ⚠️ DIE MEDIENABFRAGE IST PFLICHT, NICHT KOSMETIK. Das Freihalten steht in assets/home.css und gilt NUR ab 901px (`@media (min-width:901px)`) - darunter sind die Abschnitte bewusst keine Bildschirmseiten und haben den Innenabstand nicht. Ohne die Abfrage hier legt sich am Handy die 65px hohe Navi ueber die Vorzeile "SAISON 26/27": am 06.09.2026 gebaut, gemessen, und genau so wieder eingefangen (secTopImBild 0 statt der noetigen ~65). Wer die Bedingung in home.css aendert, aendert sie hier mit. */ @media (min-width:901px){ section[id].schirm{scroll-margin-top:0} } .wrap{max-width:1080px;margin:0 auto} .center{text-align:center} :focus-visible{outline:3px solid var(--orange);outline-offset:3px} /* Nur fuer Screenreader (Sprunglink) */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--orange);color:var(--green); padding:10px 16px;font-weight:700;text-decoration:none;border-radius:0 0 8px 0; } .skip-link:focus{left:0} /* ============ Was NICHT in der Serif laeuft ============ Kleine gesperrte Versalien, Navi, Knoepfe und Formularfelder bleiben auf der System-Schrift – so hat Luca den Vergleich am 04.09.2026 ausgewaehlt: Serif traegt Ueberschriften und Fließtext, die Etiketten bleiben sachlich. Steht hier gebuendelt statt in vierzehn Einzelregeln, damit die Aufteilung an einer Stelle sichtbar ist. Seiten-CSS ergaenzt die Liste nicht – wer ein neues Etikett baut, traegt es hier ein. */ .nav-inner a.navlink, .overline, .btn, .skip-link, .placeholder-tag, .rinfo b,.rinfo span, thead th, .ha,.chip,.badge, .rota-btn,.rota-hint, .toggle button, form label,form input,form textarea,form button, .stn-card .kicker,.stn-card .when, .board-cap,.board-hint, .foot-bottom{ font-family:var(--font-ui); } /* ============ Navigation N1 – Header + Hero als EIN grüner Block ============ */ header.nav{ position:sticky;top:0;z-index:50; background:var(--green); border-bottom:1px solid transparent; transition:box-shadow .2s ease,border-color .2s ease,background .2s ease; } header.nav.scrolled{ background:var(--green-deep); border-bottom-color:rgba(245,241,220,.16); box-shadow:0 10px 26px rgba(0,0,0,.28); } .nav-inner{ max-width:1080px;margin:0 auto;position:relative; display:flex;align-items:center;justify-content:center; gap:10px; padding:11px 20px; } .nav-links{display:flex;align-items:center;gap:clamp(12px,3vw,36px)} .nav-inner a.navlink{ color:var(--cream);text-decoration:none; font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700; padding:6px 2px;border-bottom:2px solid transparent; transition:color .15s ease,border-color .15s ease;white-space:nowrap; } .nav-inner a.navlink:hover{color:var(--orange);border-bottom-color:var(--orange)} .nav-inner a.navlink[aria-current]{color:var(--orange);border-bottom-color:var(--orange)} .nav-logo{display:flex;align-items:center} .nav-logo img{height:48px;width:48px;display:block} .brand-mobile{display:none} .burger{ display:none;background:none;border:2px solid rgba(245,241,220,.55);border-radius:8px; padding:5px 10px;font-size:18px;line-height:1;color:var(--cream);cursor:pointer; } .burger:hover{border-color:var(--orange);color:var(--orange)} /* ============ Hero (nahtlos am Header – ein grünes Feld) ============ */ .hero{ background:var(--green);color:var(--cream); padding:64px 20px 92px;position:relative;overflow:hidden;text-align:center; } /* Beide Regeln gelten weiterhin fuer „Unser Weg" – dort steht die Linien-Grafik noch im Markup (page-unser-weg.php) und haengt an genau diesen zwei Zeilen. Die Startseite hat seit 05.09.2026 kein mehr hier drin und ueberschreibt die Deckkraft in assets/home.css (nur dort, weil home.css ausschliesslich unter is_front_page() geladen wird). Die frueher hier stehende .hero-logo-Regel ist ersatzlos entfallen: das grosse Logo im Textblock gibt es nicht mehr. */ .hero-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:.07} .hero-bg svg{width:min(760px,120vw);height:auto} .hero-inner{position:relative;z-index:2;max-width:840px;margin:0 auto} .hero .overline{color:var(--orange);font-size:13px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;margin-bottom:14px} .hero h1{font-size:clamp(46px,9vw,104px);color:var(--cream)} .hero h1 .accent{color:var(--orange)} .hero p.sub{max-width:560px;margin:24px auto 36px;font-size:18px;color:rgba(245,241,220,.82)} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* Kompakter Hero für Unterseiten */ .hero.hero-sub{padding:52px 20px 62px} /* Lange Einzelwoerter wie „Datenschutzerklaerung" sind bei 36px rund 400px breit und passen auf dem Handy nicht in die Zeile. Der Hero hat overflow:hidden – ohne die beiden Regeln hier wird das Wort schlicht ABGESCHNITTEN, und zwar lautlos: die uebliche Ueberlauf-Messung (scrollWidth vs. innerWidth) bleibt gruen, weil der Ueberstand ja weggeschnitten wird. Gemessen 04.09.2026 bei 375px: Textbreite 401px in einer 335px-Box. hyphens trennt sauber nach deutschen Regeln ( ist gesetzt), overflow-wrap ist der Rueckfall, falls ein Browser keine Trennmuster hat. */ .hero.hero-sub h1{font-size:clamp(36px,6.4vw,68px);hyphens:auto;overflow-wrap:break-word} .hero.hero-sub p.sub{margin-bottom:0} /* ============ Buttons ============ */ .btn{display:inline-block;text-decoration:none;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px; padding:14px 26px;border-radius:999px;border:2px solid var(--green);transition:background .15s,color .15s,border-color .15s} .btn-primary{background:var(--green);color:var(--cream)} .btn-primary:hover{background:var(--orange);color:var(--green);border-color:var(--orange)} .btn-ghost{background:transparent;color:var(--green)} .btn-ghost:hover{background:var(--green);color:var(--cream)} /* Buttons auf grünem Grund */ .hero .btn-primary,.on-green .btn-primary{background:var(--orange);color:var(--green);border-color:var(--orange)} .hero .btn-primary:hover,.on-green .btn-primary:hover{background:var(--cream);color:var(--green);border-color:var(--cream)} .hero .btn-ghost,.on-green .btn-ghost{background:transparent;color:var(--cream);border-color:var(--cream)} .hero .btn-ghost:hover,.on-green .btn-ghost:hover{background:var(--cream);color:var(--green)} /* ============ Sektions-Header (immer zentriert) ============ */ .sec-head{max-width:740px;margin:0 auto 44px;text-align:center} .sec-head .overline{color:var(--orange-deep);font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:700} .sec-head h2{font-size:clamp(34px,6vw,58px);margin-top:10px} .sec-head p.lead{margin-top:14px;color:var(--green-soft);font-size:16px} .on-green .sec-head .overline{color:var(--orange)} .on-green .sec-head h2{color:var(--cream)} .on-green .sec-head p.lead{color:rgba(245,241,220,.82)} .src-note{margin-top:16px;font-size:12px;color:var(--green-mute);text-align:center} .on-green .src-note{color:rgba(245,241,220,.72)} /* ============ Platzhalter-Kennzeichnung ============ SEIT 12.09.2026 NICHT MEHR IM EINSATZ: die letzten Platzhalter standen auf „Unser Weg" und sind durch echte Fotos ersetzt worden – eine Station bleibt bewusst ganz ohne Bild (Lucas Entscheidung). Die Regeln bleiben trotzdem stehen: sie sind die Vorschrift dafuer, WIE ein Platzhalter auszusehen hat, wenn wieder einer gebraucht wird – erkennbar provisorisch, damit ihn niemand fuer fertig haelt. Wer sie loescht, baut den naechsten frei nach Gefuehl. */ .placeholder-tag{ display:inline-block;background:var(--orange);color:var(--green); font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:3px 8px;border-radius:4px;vertical-align:middle; } .ph-surface{ background: repeating-linear-gradient(135deg,rgba(245,241,220,.05) 0 12px,transparent 12px 24px), linear-gradient(160deg,#0A4A3A 0%,#14352b 62%,#1c352d 100%); border:2px dashed rgba(247,146,31,.55); position:relative;overflow:hidden; } /* ============ Einfache Inhaltsseiten (Impressum, Datenschutz, …) ============ */ .page-body{max-width:760px;margin:0 auto} .page-body h2{font-size:clamp(26px,4vw,38px);margin:34px 0 12px} .page-body h3{font-size:22px;margin:26px 0 10px} .page-body p,.page-body li{font-size:17px;color:var(--green-soft)} .page-body p{margin-bottom:16px} .page-body ul,.page-body ol{margin:0 0 16px 22px} .page-body li{margin-bottom:8px} .page-body a{color:var(--orange-deep);font-weight:700} /* ============ Kontakt / Footer ============ */ footer{background:var(--green);color:var(--cream);padding:64px 20px 30px} .foot-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1.2fr 1fr .9fr;gap:32px} .foot-brand{display:flex;align-items:center;gap:14px;margin-bottom:14px} .foot-brand img{height:52px;width:52px} footer h3{font-size:20px} footer h3 .dot{color:var(--orange)} footer ul{list-style:none} footer li{margin-bottom:8px;font-size:14px} footer a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(245,241,220,.35)} footer a:hover{color:var(--orange);border-color:var(--orange)} .foot-note{font-size:14px;max-width:320px;opacity:.85} /* Quellen- und Einverstaendnishinweis zu den Personenfotos (seit 06.09.2026 hier, vorher unter dem Portraet-Band – Nachtrag t-3097, Markup in footer.php). Farbe ausgeschrieben statt --green-mute: dieselbe Deckkraft wie .foot-bottom, gemessen 7,57:1 auf #003C2E. --green-mute ist ein dunkles Gruen und waere auf dem gruenen Footer unlesbar – daran aendert auch die Anhebung auf .72 (t-3095, 06.09.2026) nichts. Die Variable gehoert hier schlicht nicht hin. */ /* .foot-quelle: Quellen- und Logo-Hinweis zu Spielplan und Tabelle, seit dem Nachtrag zu t-3100 (06.09.2026) hier statt zweimal unter den Kaesten. Gleiche Optik wie der Fotohinweis – es ist dieselbe Sorte Angabe, und zwei verschiedene Kleingedruckt-Stile untereinander waeren nur Unruhe. */ .foot-fotos, .foot-quelle{max-width:1080px;margin:30px auto 0;font-size:12px;line-height:1.7; color:rgba(245,241,220,.8)} .foot-quelle{margin-top:12px} .foot-bottom{max-width:1080px;margin:44px auto 0;padding-top:18px;border-top:1px solid rgba(245,241,220,.25); display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;opacity:.8} /* ============ Trainings-Popup ============ Gehoert in style.css und nicht in home.css: einer der vier Ausloeser sitzt auf „Unser Weg", und home.css laedt nur unter is_front_page(). Die Positionierung steht hier VOLLSTAENDIG, obwohl der Browser fuer schon eine mitbringt (`position:fixed`, `inset:0`, `height:fit-content`, `margin:auto` – genau diese vier zusammen zentrieren es im Bild). Grund: der Reset ganz oben in dieser Datei setzt `*{margin:0}`, und eine Autorenregel schlaegt die Browser-Vorgabe. Das Popup klebte deshalb messbar in der linken oberen Ecke. Wer eine der vier Zeilen entfernt, holt sich das zurueck – und `height:fit-content` gehoert dazu: mit `top`+`bottom` und automatischer Hoehe werden die Auto-Raender zu 0 gerechnet und das Popup wird ueber die ganze Hoehe gezogen. ------------------------------------------------------------------------- Die Breite ist bewusst nie eine feste Pixelzahl: `min()` nimmt am Laptop die 520 px und am Handy alles ausser 2x16 px Luft. Die Hoehe wird gegen die SICHTBARE Hoehe gedeckelt (`dvh`) – `vh` meint auf dem Handy die Hoehe OHNE eingeblendete Browserleisten und ist damit zu gross; die alte Einheit steht nur als Rueckfall davor. Gescrollt wird im Popup selbst, nicht die Seite. */ .tpop{ /* Diese vier Zeilen sind die Zentrierung – siehe oben, nicht wegkuerzen. Gemessen 06.09.2026: ohne sie sass das Popup bei 1440x900 auf x=0/y=0. */ position:fixed; inset:0; margin:auto; height:fit-content; width:min(520px, calc(100vw - 32px)); max-width:calc(100vw - 32px); /* sonst gewinnt die UA-Regel calc(100% - 6px - 2em) */ max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--green-line); border-radius:var(--radius); background:var(--card); color:var(--green); box-shadow:0 24px 60px rgba(0,0,0,.32); overflow:hidden; /* runde Ecken sollen den Inhalt beschneiden */ } /* Ohne [open] ist ein per UA-Regel display:none – die Flex-Spalte darf deshalb NUR im geoeffneten Zustand gelten, sonst steht das Popup dauerhaft sichtbar im Footer. */ .tpop[open]{display:flex;flex-direction:column} /* ::backdrop erbt in aelteren Chrome-Fassungen keine Custom Properties vom Wurzelelement – deshalb hier ausnahmsweise der Zahlenwert von --green-deep (#002A20) statt der Variablen. */ .tpop::backdrop{background:rgba(0,42,32,.62)} .tpop-head{flex:0 0 auto;display:flex;justify-content:flex-end;padding:10px 10px 0} /* min-height:0 ist hier kein Schmuck: ein Flex-Kind schrumpft ohne diese Zeile nicht unter seine Inhaltshoehe, und dann waere max-height wirkungslos und die Seite dahinter wuerde scrollen statt das Popup. */ .tpop-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 28px 28px;overflow-wrap:break-word} /* 44x44 ist keine Optik, sondern die Mindest-Trefferflaeche fuer einen Finger. Ein 16-px-Kreuz in der Ecke ist am Handy nicht bedienbar. */ .tpop-x{ display:flex;align-items:center;justify-content:center; width:44px;height:44px; background:none;border:0;border-radius:999px;cursor:pointer; font-family:var(--font-ui);font-size:26px;line-height:1;color:var(--green); } .tpop-x:hover{background:var(--cream-2)} .tpop h2{font-size:clamp(26px,5vw,34px)} /* Nicht kleiner als der uebrige Fliesstext (body: 16px). Wird der Platz eng, wird gescrollt – nicht verkleinert. */ .tpop-lead{margin-top:12px;font-size:17px;color:var(--green-soft)} .tpop-facts{margin-top:24px;border-top:1px solid var(--green-line)} .tpop-facts dt{ font-family:var(--font-ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase; font-weight:700;color:var(--green);opacity:.85;margin-top:18px; } .tpop-facts dd{font-size:17px;color:var(--green-soft);margin-top:2px} /* inline-block + Innenabstand: erst dadurch wird aus einer 17-px-Textzeile eine Flaeche, die ein Finger trifft. Der negative Aussenabstand haelt den Text trotzdem buendig unter dem Etikett. Farbe: --green statt --orange-deep. Anlass war der Kontrast – das alte #B35B00 lag auf Creme bei 4,19:1 und damit unter der Schwelle. Seit t-3095 (06.09.2026) steht die Variable auf #9A4E00 und wuerde mit 5,34:1 bestehen; der Grund ist also weg. Die Farbe bleibt trotzdem gruen – getauscht wird sie nur, wenn Luca das ausdruecklich will. Nicht als Versehen "nachziehen". */ .tpop-facts dd a{ display:inline-block;min-height:44px;padding:9px 8px;margin-left:-8px;border-radius:8px; color:var(--green);font-weight:700;text-decoration:underline;text-underline-offset:3px; } .tpop-facts dd a:hover{background:var(--green);color:var(--cream);text-decoration:none} /* Solange das Popup offen ist, steht die Seite dahinter still. Das native macht sie zwar unbedienbar, haelt sie aber nicht am Scrollen. --sbw setzt assets/site.js: die Breite der Bildlaufleiste, die beim Sperren verschwindet. Ohne diesen Ausgleich rutscht die ganze Seite im Moment des Oeffnens um ein paar Pixel nach rechts (auf macOS mit ueberlagerter Bildlaufleiste ist der Wert 0, unter Windows nicht). */ html.tpop-offen{overflow:hidden;padding-right:var(--sbw,0px)} @media (max-width:420px){ .tpop-body{padding:0 20px 22px} .tpop-facts dd a{padding:9px 6px;margin-left:-6px} } /* ============ WordPress-Admin-Leiste: klebende Navi nicht verdecken ============ Nur ein Notnagel, falls assets/site.js nicht laedt. Im Normalfall misst das Skript die echte Hoehe der Admin-Leiste und setzt top + --nav-h danach. */ body.admin-bar header.nav{top:32px} /* ============ Responsive ============ */ @media (max-width:860px){ .foot-grid{grid-template-columns:1fr} } @media (max-width:760px){ section{padding:56px 16px} /* Nav: Logo links, Burger rechts, Menü als Dropdown auf Grün */ .nav-inner{justify-content:space-between;gap:10px} .brand-mobile{display:flex;align-items:center} .brand-mobile img{height:42px;width:42px;display:block} .burger{display:block} .nav-links{ position:absolute;top:100%;left:0;right:0;display:none; flex-direction:column;align-items:stretch;gap:0; background:var(--green-deep);border-bottom:2px solid var(--orange);padding:8px 20px 16px; } .nav-links.open{display:flex} .nav-links a.navlink{padding:13px 4px;border-bottom:1px solid rgba(245,241,220,.14)} .nav-links a.navlink:last-child{border-bottom:1px solid transparent} .nav-logo{display:none} .hero{padding:48px 16px 64px} .hero p.sub{font-size:16px} }