|
644 | 644 | } |
645 | 645 |
|
646 | 646 | [data-brand=fdp] .nhsuk-header { |
647 | | - background-color: var(--brand-fdp-semantic-surface-background-primary, #ffffff); |
648 | | - color: var(--brand-fdp-semantic-surface-text-primary, #425563); |
| 647 | + background-color: var(--fdp-header-bg, var(--brand-fdp-semantic-surface-background-primary, #ffffff)); |
| 648 | + color: var(--fdp-header-text, var(--brand-fdp-semantic-surface-text-primary, #425563)); |
649 | 649 | } |
650 | 650 | [data-brand=fdp] .nhsuk-header__container { |
651 | 651 | padding-left: 32px; |
|
681 | 681 | text-decoration: none; |
682 | 682 | } |
683 | 683 | [data-brand=fdp] .nhsuk-header:where(:not(.nhsuk-header--blue):not(.nhsuk-header--dark-grey-gradient):not(.nhsuk-header--dark-gray-gradient):not(.nhsuk-header--dark-blue-gradient)) .nhsuk-header__navigation { |
684 | | - background-color: var(--brand-fdp-semantic-surface-background-primary, #ffffff); |
| 684 | + background-color: var(--fdp-header-nav-bg, var(--brand-fdp-semantic-surface-background-primary, #ffffff)); |
685 | 685 | } |
686 | 686 | [data-brand=fdp] .nhsuk-header__navigation-link, [data-brand=fdp] .nhsuk-header__navigation-button { |
687 | | - color: var(--brand-fdp-semantic-surface-text-primary, #425563); |
| 687 | + color: var(--fdp-header-nav-text, var(--brand-fdp-semantic-surface-text-primary, #425563)); |
688 | 688 | font-weight: 600; |
689 | 689 | } |
690 | 690 | [data-brand=fdp] .nhsuk-header__navigation-link:hover, [data-brand=fdp] .nhsuk-header__navigation-button:hover { |
|
693 | 693 | [data-brand=fdp] .nhsuk-header__navigation-link:active, [data-brand=fdp] .nhsuk-header__navigation-button:active { |
694 | 694 | color: #003087; |
695 | 695 | } |
696 | | -[data-brand=fdp] .nhsuk-header .nhsuk-header__navigation .nhsuk-header__navigation-link, |
697 | | -[data-brand=fdp] .nhsuk-header .nhsuk-header__navigation .nhsuk-header__navigation-button { |
| 696 | +[data-brand=fdp] .nhsuk-header__navigation-link:focus, [data-brand=fdp] .nhsuk-header__navigation-button:focus { |
| 697 | + background-color: #d6cce3; |
| 698 | + box-shadow: inset 0 -4px #ac98cb; |
| 699 | + color: #212b32; |
| 700 | +} |
| 701 | +[data-brand=fdp] .nhsuk-header [data-brand=fdp] .nhsuk-header__navigation [data-brand=fdp] .nhsuk-header__navigation-link, |
| 702 | +[data-brand=fdp] .nhsuk-header [data-brand=fdp] .nhsuk-header__navigation [data-brand=fdp] .nhsuk-header__navigation-button { |
698 | 703 | font-weight: 600; |
699 | 704 | } |
700 | | -[data-brand=fdp] .nhsuk-header .nhsuk-header__service .nhsuk-header__service-name, |
701 | | -[data-brand=fdp] .nhsuk-header .nhsuk-header__service .nhsuk-header__service-logo { |
| 705 | +[data-brand=fdp] .nhsuk-header [data-brand=fdp] .nhsuk-header__service [data-brand=fdp] .nhsuk-header__service-name, |
| 706 | +[data-brand=fdp] .nhsuk-header [data-brand=fdp] .nhsuk-header__service [data-brand=fdp] .nhsuk-header__service-logo { |
702 | 707 | font-weight: 600; |
703 | 708 | } |
704 | | - |
| 709 | +[data-brand=fdp] .nhsuk-header .nhsuk-header__dropdown-menu { |
| 710 | + border: 0; |
| 711 | +} |
| 712 | +[data-brand=fdp] .nhsuk-header .nhsuk-header__dropdown-link:focus { |
| 713 | + background-color: #d6cce3; |
| 714 | + color: #212b32; |
| 715 | + box-shadow: inset 0 -4px #ac98cb; |
| 716 | +} |
705 | 717 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue { |
706 | | - background-color: #003087; |
707 | | - color: #ffffff; |
| 718 | + background-color: var(--fdp-header-dark-blue-bg, #003087); |
| 719 | + color: var(--fdp-header-dark-blue-text, #ffffff); |
708 | 720 | } |
709 | 721 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation { |
710 | | - background: #003087; |
| 722 | + background-color: var(--fdp-header-dark-blue-nav-bg, #003087); |
| 723 | + color: var(--fdp-header-dark-blue-nav-text, #ffffff); |
| 724 | +} |
| 725 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation a { |
| 726 | + color: var(--fdp-header-dark-blue-nav-text, #ffffff); |
| 727 | +} |
| 728 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation a:focus { |
| 729 | + background-color: #d6cce3; |
| 730 | + color: #003087; |
711 | 731 | } |
| 732 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation__navigation-link, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation__navigation-button { |
| 733 | + color: var(--fdp-header-dark-blue-nav-text, #ffffff); |
| 734 | +} |
| 735 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__navigation-link, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__navigation-button { |
| 736 | + color: var(--fdp-header-dark-blue-nav-text, #ffffff); |
| 737 | +} |
| 738 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__service-logo, |
| 739 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__service-name, |
| 740 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__service-name[href], |
| 741 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__organisation-name, |
712 | 742 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation-link, |
713 | 743 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation-button { |
714 | 744 | color: #ffffff; |
715 | 745 | } |
716 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__service-logo, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__service-name, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__service-name[href] { |
717 | | - color: #ffffff; |
718 | | - text-decoration-color: currentColor; |
719 | | - font-weight: 600; |
720 | | -} |
721 | 746 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__service-logo:hover, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__service-name:hover, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__service-name[href]:hover { |
722 | 747 | color: #ffffff; |
723 | 748 | text-decoration: none; |
|
732 | 757 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation-container { |
733 | 758 | box-shadow: inset 0 0.25px 0 0 #d8dde0; |
734 | 759 | } |
735 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation { |
736 | | - background-color: #003087; |
737 | | - color: #ffffff; |
738 | | -} |
739 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation a { |
740 | | - color: #ffffff; |
741 | | -} |
742 | | - |
743 | | -.nhsuk-header__navigation-item--hidden { |
744 | | - display: none !important; |
745 | | -} |
746 | | - |
747 | | -.nhsuk-header__navigation-container--measuring .nhsuk-header__navigation-item--hidden { |
748 | | - display: inline-block !important; |
749 | | - visibility: hidden; |
750 | | -} |
751 | | - |
752 | 760 | [data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey { |
753 | | - background-color: #e8edee; |
754 | | - color: #ffffff; |
| 761 | + background-color: var(--fdp-header-pale-grey-bg, #e8edee); |
| 762 | + color: var(--fdp-header-pale-grey-text, #ffffff); |
755 | 763 | } |
756 | 764 | [data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__navigation { |
757 | | - background: #425563; |
| 765 | + background-color: var(--fdp-header-pale-grey-nav-bg, #e8edee); |
| 766 | + color: var(--fdp-header-pale-grey-nav-text, #ffffff); |
758 | 767 | } |
759 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__navigation-link, |
760 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__navigation-button { |
761 | | - color: #425563; |
| 768 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__navigation a { |
| 769 | + color: var(--fdp-header-pale-grey-nav-text, #425563); |
762 | 770 | } |
763 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__navigation-link, |
764 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__navigation-button { |
765 | | - color: #425563; |
| 771 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey__navigation-link, [data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey__navigation-button { |
| 772 | + color: var(--fdp-header-pale-grey-nav-text, #425563); |
766 | 773 | } |
767 | 774 | [data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__service-logo, |
768 | 775 | [data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__service-name, |
769 | 776 | [data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__service-name[href], |
770 | 777 | [data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__organisation-name, |
771 | 778 | [data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__navigation-link, |
772 | 779 | [data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__navigation-button { |
773 | | - color: #425563; |
| 780 | + color: var(--fdp-header-pale-grey-text, #425563); |
774 | 781 | } |
775 | 782 | [data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__navigation-container { |
776 | 783 | box-shadow: inset 0 0.25px 0 0 #d8dde0; |
777 | 784 | } |
778 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__navigation { |
779 | | - background-color: #e8edee; |
780 | | - color: #ffffff; |
781 | | -} |
782 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--pale-grey .nhsuk-header__navigation a { |
783 | | - color: #425563; |
784 | | -} |
785 | | - |
786 | 785 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey { |
787 | 786 | background-color: #425563; |
788 | 787 | color: #ffffff; |
| 788 | + background-color: var(--fdp-header-dark-grey-bg, #425563); |
789 | 789 | } |
790 | 790 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation { |
791 | | - background: #ffffff; |
| 791 | + background-color: transparent; |
| 792 | + color: var(--fdp-header-pale-grey-nav-text, #ffffff); |
792 | 793 | } |
793 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation-link, |
794 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation-button { |
| 794 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation a { |
795 | 795 | color: #ffffff; |
796 | 796 | } |
| 797 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation a:focus { |
| 798 | + background-color: #d6cce3; |
| 799 | + color: #212b32; |
| 800 | +} |
| 801 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__navigation-link, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__navigation-button { |
| 802 | + color: var(--fdp-header-dark-grey-nav-text, #ffffff); |
| 803 | +} |
| 804 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__navigation-link:focus, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__navigation-button:focus { |
| 805 | + background-color: #d6cce3; |
| 806 | + color: #212b32; |
| 807 | +} |
797 | 808 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__service-logo, |
798 | 809 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__service-name, |
799 | 810 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__service-name[href], |
800 | 811 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__organisation-name, |
801 | 812 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation-link, |
802 | 813 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation-button { |
803 | | - color: #ffffff; |
| 814 | + color: var(--fdp-header-dark-grey-text, #ffffff); |
804 | 815 | } |
805 | 816 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__service-logo, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__service-name, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__service-name[href] { |
806 | | - color: #ffffff; |
| 817 | + color: var(--fdp-header-dark-grey-text, #ffffff); |
807 | 818 | text-decoration-color: currentColor; |
808 | 819 | font-weight: 600; |
809 | 820 | } |
|
818 | 829 | background-color: #ffeb3b; |
819 | 830 | color: #212b32; |
820 | 831 | } |
821 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__navigation-container { |
822 | | - box-shadow: inset 0 1px 0 0 var(--brand-fdp-semantic-surface-border-default, #d8dde0); |
823 | | -} |
824 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__navigation-container a { |
825 | | - text-decoration: none; |
826 | | -} |
827 | 832 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation-container { |
828 | 833 | box-shadow: inset 0 0.25px 0 0 #d8dde0; |
829 | 834 | } |
830 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation { |
831 | | - background-color: #425563; |
832 | | -} |
833 | | - |
834 | 835 | [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey { |
835 | | - background-color: #768692; |
836 | | - color: #ffffff; |
| 836 | + background-color: var(--fdp-header-mid-grey-bg, #768692); |
| 837 | + color: var(--fdp-header-mid-grey-text, #ffffff); |
837 | 838 | } |
838 | 839 | [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation { |
839 | | - background: transparent; |
| 840 | + background-color: var(--fdp-header-mid-grey-nav-bg, #768692); |
840 | 841 | } |
841 | 842 | [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__service-logo, |
842 | 843 | [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__service-name, |
843 | 844 | [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__service-name[href], |
844 | 845 | [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__organisation-name, |
845 | 846 | [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation-link, |
846 | 847 | [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation-button { |
| 848 | + color: var(--fdp-header-mid-grey-text, #ffffff); |
| 849 | +} |
| 850 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation { |
| 851 | + background-color: transparent; |
| 852 | + color: #ffffff; |
| 853 | +} |
| 854 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation a { |
847 | 855 | color: #ffffff; |
848 | 856 | } |
| 857 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation a:focus { |
| 858 | + background-color: #d6cce3; |
| 859 | + color: #212b32; |
| 860 | +} |
849 | 861 | [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation-container { |
850 | 862 | box-shadow: inset 0 0.25px 0 0 #d8dde0; |
851 | 863 | } |
852 | | -[data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation { |
853 | | - background-color: #768692; |
854 | | -} |
855 | | - |
856 | 864 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient { |
857 | | - background: linear-gradient(90deg, #4c6272, #768692); |
858 | | - color: #ffffff; |
| 865 | + background: var(--fdp-header-dark-grey-gradient-bg, linear-gradient(90deg, #4c6272, #768692)); |
| 866 | + color: var(--fdp-header-dark-grey-gradient-text, #ffffff); |
859 | 867 | } |
860 | 868 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation { |
861 | | - background: transparent; |
| 869 | + background-color: transparent; |
| 870 | + color: #ffffff; |
| 871 | +} |
| 872 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation a { |
| 873 | + color: #ffffff; |
| 874 | +} |
| 875 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation a:focus { |
| 876 | + background-color: #d6cce3; |
| 877 | + color: #212b32; |
862 | 878 | } |
863 | 879 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__service-logo, |
864 | 880 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__service-name, |
865 | 881 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__service-name[href], |
866 | 882 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__organisation-name, |
867 | 883 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation-link, |
868 | 884 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation-button { |
869 | | - color: #ffffff; |
| 885 | + color: var(--fdp-header-dark-grey-gradient-text, #ffffff); |
870 | 886 | } |
871 | 887 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation-container { |
872 | 888 | background: inherit; |
873 | 889 | box-shadow: inset 0 0.25px 0 0 #d8dde0; |
874 | 890 | } |
875 | | - |
876 | 891 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue-gradient { |
877 | | - background: linear-gradient(270deg, #005eb8, #003087); |
878 | | - color: #ffffff; |
| 892 | + background: var(--fdp-header-dark-blue-gradient-bg, #003087); |
| 893 | + color: var(--fdp-header-dark-blue-gradient-text, #ffffff); |
879 | 894 | } |
880 | 895 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue-gradient .nhsuk-header__navigation { |
881 | | - background: transparent; |
| 896 | + background-color: transparent; |
| 897 | + color: #ffffff; |
| 898 | +} |
| 899 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue-gradient .nhsuk-header__navigation a { |
| 900 | + color: #ffffff; |
| 901 | +} |
| 902 | +[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue-gradient .nhsuk-header__navigation a:focus { |
| 903 | + background-color: #d6cce3; |
| 904 | + color: #212b32; |
882 | 905 | } |
883 | 906 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue-gradient .nhsuk-header__service-logo, |
884 | 907 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue-gradient .nhsuk-header__service-name, |
885 | 908 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue-gradient .nhsuk-header__service-name[href], |
886 | 909 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue-gradient .nhsuk-header__organisation-name, |
887 | 910 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue-gradient .nhsuk-header__navigation-link, |
888 | 911 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue-gradient .nhsuk-header__navigation-button { |
889 | | - color: #ffffff; |
| 912 | + color: var(--fdp-header-dark-blue-gradient-text, #ffffff); |
890 | 913 | } |
891 | 914 | [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue-gradient .nhsuk-header__navigation-container { |
892 | 915 | box-shadow: inset 0 0.25px 0 0 #d8dde0; |
|
0 commit comments