|
97 | 97 | font-style: normal; |
98 | 98 | } |
99 | 99 |
|
| 100 | +h1, |
| 101 | +h2, |
| 102 | +h3, |
| 103 | +h4 { |
| 104 | + line-height: 1.2; |
| 105 | +} |
| 106 | + |
100 | 107 | .main-navigation a, |
101 | 108 | .dropdown--button { |
102 | 109 | font-size: 1.2em; |
@@ -525,13 +532,31 @@ p { |
525 | 532 | color: var(--toggled-color); |
526 | 533 | } |
527 | 534 |
|
| 535 | +.usp { |
| 536 | + position: relative; |
| 537 | +} |
| 538 | + |
528 | 539 | .usp a { |
529 | 540 | /* padding: var(--rythm-unit); */ |
530 | 541 | text-decoration: none; |
531 | 542 | display: block; |
532 | 543 | color: var(--primary-color); |
533 | 544 | } |
534 | 545 |
|
| 546 | +/* Stretched-link pattern: ensures the whole card is clickable in Firefox, |
| 547 | + where nested block elements inside <a> can otherwise leave dead zones. */ |
| 548 | +.usp > a::after { |
| 549 | + content: ""; |
| 550 | + position: absolute; |
| 551 | + inset: 0; |
| 552 | + z-index: 1; |
| 553 | +} |
| 554 | + |
| 555 | +.usp > a > * { |
| 556 | + position: relative; |
| 557 | + z-index: 2; |
| 558 | +} |
| 559 | + |
535 | 560 | .usp .cta { |
536 | 561 | text-transform: uppercase; |
537 | 562 | background-color: var(--highlight-color-pale); |
@@ -639,18 +664,195 @@ ol.content-list { |
639 | 664 | padding: calc(var(--rythm-unit)/2) 0; |
640 | 665 | } |
641 | 666 |
|
642 | | -/* Fix white-on-white logos: dark background for member logo container */ |
| 667 | +/* ===== Member logos ===== |
| 668 | + Default to a clean white card. Per-logo overrides switch in a dark |
| 669 | + background for the handful of logos that were designed as "negative" |
| 670 | + (white/light) artwork and would otherwise disappear on white. */ |
643 | 671 | .company-member .image { |
644 | | - background: #2b2b2b; |
645 | | - border-radius: 6px; |
| 672 | + background: #ffffff; |
| 673 | + border: 1px solid #e6e6e6; |
| 674 | + border-radius: 8px; |
| 675 | + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); |
646 | 676 | display: flex; |
647 | 677 | align-items: center; |
648 | 678 | justify-content: center; |
649 | | - padding: 0.5rem; |
| 679 | + padding: 14px 18px; |
| 680 | + min-height: 120px; |
| 681 | + transition: box-shadow 0.25s ease, transform 0.25s ease; |
650 | 682 | } |
651 | 683 |
|
652 | 684 | .company-member .image img { |
653 | 685 | max-width: 100%; |
654 | | - max-height: 80px; |
| 686 | + max-height: 88px; |
| 687 | + width: auto; |
| 688 | + height: auto; |
655 | 689 | object-fit: contain; |
656 | 690 | } |
| 691 | + |
| 692 | +.company-member:hover .image { |
| 693 | + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10); |
| 694 | + transform: translateY(-1px); |
| 695 | +} |
| 696 | + |
| 697 | +/* Members whose logo is designed for a dark background ("negative"/white |
| 698 | + artwork) opt in via "dark_bg: true" in databags/membership.yaml. */ |
| 699 | +.company-member .image--dark { |
| 700 | + background: #1f2937; |
| 701 | + border-color: #1f2937; |
| 702 | +} |
| 703 | + |
| 704 | +/* Placeholder card for members without a logo: show their initial. */ |
| 705 | +.company-member .image--placeholder { |
| 706 | + background: #f3f4f6; |
| 707 | + border-color: #e6e6e6; |
| 708 | + color: #9ca3af; |
| 709 | + font-family: var(--font-headings, inherit); |
| 710 | + font-weight: 700; |
| 711 | + font-size: 2.4em; |
| 712 | + letter-spacing: 0; |
| 713 | +} |
| 714 | + |
| 715 | +/* Tidy up the details column next to the logo. */ |
| 716 | +.company-member .details { |
| 717 | + display: flex; |
| 718 | + flex-direction: column; |
| 719 | + justify-content: center; |
| 720 | +} |
| 721 | + |
| 722 | +.company-member .details .name { |
| 723 | + font-weight: 700; |
| 724 | + line-height: 1.25; |
| 725 | +} |
| 726 | + |
| 727 | +.company-member .details .website { |
| 728 | + font-size: 0.85em; |
| 729 | + opacity: 0.75; |
| 730 | + word-break: break-all; |
| 731 | +} |
| 732 | + |
| 733 | +/* On wide screens give logos a bit more breathing room and equal heights. */ |
| 734 | +@media (min-width: 800px) { |
| 735 | + .company-members { |
| 736 | + gap: calc(var(--rythm-unit) * 1.2); |
| 737 | + } |
| 738 | +} |
| 739 | + |
| 740 | +/* ===== Homepage v2 — stiftungs-/verbandsklassik ===== */ |
| 741 | + |
| 742 | +/* Hero text rhythm */ |
| 743 | +.hero h1 { |
| 744 | + margin-bottom: calc(var(--rythm-unit) / 2); |
| 745 | +} |
| 746 | + |
| 747 | +.hero p { |
| 748 | + line-height: 1.7em; |
| 749 | +} |
| 750 | + |
| 751 | +/* Conferences & barcamps */ |
| 752 | +.conferences-block > h2, |
| 753 | +.grants-section > h2, |
| 754 | +.ecosystem-section > h2, |
| 755 | +.culture-section > h2, |
| 756 | +.cta-section > h2, |
| 757 | +.volunteers-accent > h2 { |
| 758 | + margin-bottom: calc(var(--rythm-unit) / 2); |
| 759 | +} |
| 760 | + |
| 761 | +.conf-block { |
| 762 | + border-top: 1px solid var(--primary-color); |
| 763 | + padding: var(--rythm-unit) 0; |
| 764 | +} |
| 765 | + |
| 766 | +.conf-block:last-child { |
| 767 | + border-bottom: 1px solid var(--primary-color); |
| 768 | +} |
| 769 | + |
| 770 | +.conf-block h3 { |
| 771 | + font-size: 1.25em; |
| 772 | + margin-bottom: calc(var(--rythm-unit) / 2); |
| 773 | +} |
| 774 | + |
| 775 | +.conf-block p { |
| 776 | + line-height: 1.65em; |
| 777 | +} |
| 778 | + |
| 779 | +/* Volunteers accent — single editorial pull-quote block (kept by request) */ |
| 780 | +.volunteers-accent { |
| 781 | + background-color: var(--primary-color); |
| 782 | + color: var(--toggled-color); |
| 783 | + padding: calc(var(--rythm-unit) * 1.5) var(--rythm-unit); |
| 784 | + margin: var(--rythm-unit) 0; |
| 785 | +} |
| 786 | + |
| 787 | +.volunteers-accent h2 { |
| 788 | + color: var(--toggled-color); |
| 789 | +} |
| 790 | + |
| 791 | +.volunteers-statement .big-quote { |
| 792 | + font-family: "Montserrat", sans-serif; |
| 793 | + font-weight: 700; |
| 794 | + font-size: 1.25em; |
| 795 | + line-height: 1.4; |
| 796 | + margin-bottom: var(--rythm-unit); |
| 797 | + color: var(--toggled-color); |
| 798 | +} |
| 799 | + |
| 800 | +.volunteers-statement p { |
| 801 | + color: var(--toggled-color); |
| 802 | + line-height: 1.7em; |
| 803 | +} |
| 804 | + |
| 805 | +.volunteers-accent a { |
| 806 | + color: var(--highlight-color); |
| 807 | +} |
| 808 | + |
| 809 | +/* Grants / ecosystem / culture — plain prose sections, no grids */ |
| 810 | +.grants-section p, |
| 811 | +.ecosystem-section p, |
| 812 | +.culture-section p { |
| 813 | + line-height: 1.7em; |
| 814 | +} |
| 815 | + |
| 816 | +/* CTA — single button, anchored at the end */ |
| 817 | +.cta { |
| 818 | + display: inline-block; |
| 819 | + padding: 0.55em 1.2em; |
| 820 | + font-family: "Montserrat", sans-serif; |
| 821 | + font-weight: 900; |
| 822 | + text-decoration: none; |
| 823 | + text-transform: uppercase; |
| 824 | + letter-spacing: 0.04em; |
| 825 | + font-size: 0.95em; |
| 826 | + border: 2px solid var(--primary-color); |
| 827 | + color: var(--primary-color) !important; |
| 828 | + background-color: transparent; |
| 829 | + transition: background-color 0.2s ease, color 0.2s ease; |
| 830 | +} |
| 831 | + |
| 832 | +.cta--primary { |
| 833 | + background-color: var(--primary-color); |
| 834 | + color: var(--toggled-color) !important; |
| 835 | + border-color: var(--primary-color); |
| 836 | +} |
| 837 | + |
| 838 | +.cta--primary:hover { |
| 839 | + background-color: var(--highlight-color); |
| 840 | + border-color: var(--highlight-color); |
| 841 | +} |
| 842 | + |
| 843 | +.single-cta { |
| 844 | + margin-top: var(--rythm-unit); |
| 845 | +} |
| 846 | + |
| 847 | +.cta-section p { |
| 848 | + line-height: 1.7em; |
| 849 | +} |
| 850 | + |
| 851 | +/* Spacing between top-level sections on the homepage */ |
| 852 | +.content > section { |
| 853 | + margin-bottom: calc(var(--rythm-unit) * 2); |
| 854 | +} |
| 855 | + |
| 856 | +.content > section:last-child { |
| 857 | + margin-bottom: 0; |
| 858 | +} |
0 commit comments