diff --git a/_config.yml b/_config.yml index e696e1b9c..688e934ae 100644 --- a/_config.yml +++ b/_config.yml @@ -12,14 +12,15 @@ defaults: type: press values: layout: press + stylesheet: press-and-resources.css - scope: path: "" type: resources values: layout: resource + stylesheet: press-and-resources.css description: A state government initiative, Cal-ITP is making riding by rail and bus simpler and more cost-effective—for California transit providers and riders. domain: www.calitp.org -google_fonts: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Raleway:wght@700&display=swap" navigation: header: - name: Customer stories diff --git a/src/404.html b/src/404.html index 8b28fd856..2dab0b746 100644 --- a/src/404.html +++ b/src/404.html @@ -5,10 +5,10 @@
-

Page Not Found

+

Page Not Found

Sorry, but the page you were trying to view does not exist.

-

- Go back Home. +

+ Go back Home.

diff --git a/src/_data/dsdl_colors.yml b/src/_data/dsdl_colors.yml new file mode 100644 index 000000000..d9a53a21e --- /dev/null +++ b/src/_data/dsdl_colors.yml @@ -0,0 +1,330 @@ +- group: red + level: 10 + value: "#fef5f5" +- group: red + level: 20 + value: "#fbd6d6" +- group: red + level: 30 + value: "#f9b7b7" +- group: red + level: 40 + value: "#f37a7b" +- group: red + level: 50 + value: "#ee4142" +- group: red + level: 60 + value: "#de0e10" +- group: red + level: 70 + value: "#980a0b" +- group: red + level: 80 + value: "#750809" +- group: red + level: 90 + value: "#540506" +- group: red + level: 100 + value: "#300304" +- group: orange + level: 10 + value: "#fff4ef" +- group: orange + level: 20 + value: "#fed6c4" +- group: orange + level: 30 + value: "#fcb89a" +- group: orange + level: 40 + value: "#fa7941" +- group: orange + level: 50 + value: "#e54f0e" +- group: orange + level: 60 + value: "#c3440c" +- group: orange + level: 70 + value: "#852e08" +- group: orange + level: 80 + value: "#662306" +- group: orange + level: 90 + value: "#471804" +- group: orange + level: 100 + value: "#260d02" +- group: yellow + level: 10 + value: "#fff6de" +- group: yellow + level: 20 + value: "#ffda84" +- group: yellow + level: 30 + value: "#febd28" +- group: yellow + level: 40 + value: "#ce9411" +- group: yellow + level: 50 + value: "#a97a0e" +- group: yellow + level: 60 + value: "#90680c" +- group: yellow + level: 70 + value: "#614608" +- group: yellow + level: 80 + value: "#4a3506" +- group: yellow + level: 90 + value: "#332404" +- group: yellow + level: 100 + value: "#1b1402" +- group: green + level: 10 + value: "#f1f7f5" +- group: green + level: 20 + value: "#cde3da" +- group: green + level: 30 + value: "#abd0c0" +- group: green + level: 40 + value: "#6bab90" +- group: green + level: 50 + value: "#3b916c" +- group: green + level: 60 + value: "#1b7e54" +- group: green + level: 70 + value: "#105538" +- group: green + level: 80 + value: "#0c412a" +- group: green + level: 90 + value: "#092c1d" +- group: green + level: 100 + value: "#05170f" +- group: cyan + level: 10 + value: "#dff3fe" +- group: cyan + level: 20 + value: "#bfe4f0" +- group: cyan + level: 30 + value: "#91d1e5" +- group: cyan + level: 40 + value: "#38abd0" +- group: cyan + level: 50 + value: "#258cad" +- group: cyan + level: 60 + value: "#207894" +- group: cyan + level: 70 + value: "#155163" +- group: cyan + level: 80 + value: "#103d4c" +- group: cyan + level: 90 + value: "#0b2b34" +- group: cyan + level: 100 + value: "#06161c" +- group: blue + level: 10 + value: "#f2f8f9" +- group: blue + level: 20 + value: "#cbe2e7" +- group: blue + level: 30 + value: "#82b9c6" +- group: blue + level: 40 + value: "#6ca7b8" +- group: blue + level: 50 + value: "#488aa2" +- group: blue + level: 60 + value: "#307693" +- group: blue + level: 70 + value: "#045b86" +- group: blue + level: 80 + value: "#044869" +- group: blue + level: 90 + value: "#022a3d" +- group: blue + level: 100 + value: "#011621" +- group: purple + level: 10 + value: "#f7f7fa" +- group: purple + level: 20 + value: "#deddea" +- group: purple + level: 30 + value: "#c7c5db" +- group: purple + level: 40 + value: "#9e9ac2" +- group: purple + level: 50 + value: "#817caf" +- group: purple + level: 60 + value: "#6d68a3" +- group: purple + level: 70 + value: "#47418b" +- group: purple + level: 80 + value: "#332d7e" +- group: purple + level: 90 + value: "#211b61" +- group: purple + level: 100 + value: "#120f33" +- group: indigo + level: 10 + value: "#f7f7ff" +- group: indigo + level: 20 + value: "#dddbff" +- group: indigo + level: 30 + value: "#c4c1ff" +- group: indigo + level: 40 + value: "#9792ff" +- group: indigo + level: 50 + value: "#756fff" +- group: indigo + level: 60 + value: "#645ddf" +- group: indigo + level: 70 + value: "#433f96" +- group: indigo + level: 80 + value: "#333072" +- group: indigo + level: 90 + value: "#23214f" +- group: indigo + level: 100 + value: "#13112a" +- group: pink + level: 10 + value: "#fcf4f8" +- group: pink + level: 20 + value: "#f3d7e5" +- group: pink + level: 30 + value: "#ebb9d2" +- group: pink + level: 40 + value: "#db83b0" +- group: pink + level: 50 + value: "#ce5894" +- group: pink + level: 60 + value: "#c4367e" +- group: pink + level: 70 + value: "#901052" +- group: pink + level: 80 + value: "#6f0c3f" +- group: pink + level: 90 + value: "#4e082c" +- group: pink + level: 100 + value: "#2c0519" +- group: gray + level: 10 + value: "#f7f7f7" +- group: gray + level: 20 + value: "#dedede" +- group: gray + level: 30 + value: "#c7c7c7" +- group: gray + level: 40 + value: "#9e9e9e" +- group: gray + level: 50 + value: "#828282" +- group: gray + level: 60 + value: "#6e6e6e" +- group: gray + level: 70 + value: "#4a4a4a" +- group: gray + level: 80 + value: "#383838" +- group: gray + level: 90 + value: "#262626" +- group: gray + level: 100 + value: "#141414" +- group: slate + level: 10 + value: "#edf0f4" +- group: slate + level: 20 + value: "#dadee1" +- group: slate + level: 30 + value: "#c1c8cc" +- group: slate + level: 40 + value: "#94a0a8" +- group: slate + level: 50 + value: "#75848e" +- group: slate + level: 60 + value: "#62717b" +- group: slate + level: 70 + value: "#424c53" +- group: slate + level: 80 + value: "#313a3e" +- group: slate + level: 90 + value: "#22272b" +- group: slate + level: 100 + value: "#121416" diff --git a/src/_data/initiatives.yml b/src/_data/initiatives.yml index 7c0cfcc6d..f93c9f686 100644 --- a/src/_data/initiatives.yml +++ b/src/_data/initiatives.yml @@ -15,7 +15,7 @@ button: text: Explore Mobility Marketplace url: https://camobilitymarketplace.org - class: --calitp-primary-blue + class: --calitp-brand-blue - tag: Benefits slug: benefits id: automating-customer-discounts @@ -43,7 +43,7 @@ text: Explore Mobility Marketplace url: https://camobilitymarketplace.org class: d-none - class: --calitp-red-5 + class: --dsdl-red-80 - tag: GTFS slug: gtfs id: standardizing-trip-quality @@ -65,4 +65,4 @@ text: Explore Mobility Marketplace url: https://camobilitymarketplace.org class: d-none - class: --calitp-purple-4 + class: --dsdl-purple-70 diff --git a/src/_includes/article.html b/src/_includes/article.html index 153abb427..f29d37d96 100644 --- a/src/_includes/article.html +++ b/src/_includes/article.html @@ -15,10 +15,10 @@ {% endif %} {% endif %} -
+
{{- item.title -}}
- + {% if item.outlet %}{{ item.outlet }} |{% endif %} {% if item.tags.size > 0 %}{{ item.tags | join: ", " }} |{% endif %} {% include date.html date=item.date format = "%b %Y" -%} diff --git a/src/_includes/contact.html b/src/_includes/contact.html index 4c24e3334..151b32ed3 100644 --- a/src/_includes/contact.html +++ b/src/_includes/contact.html @@ -30,7 +30,7 @@

Connect with Cal-ITP

Drop us a line at hello@calitp.org to:
    @@ -51,8 +51,8 @@

    Connect with Cal-ITP

    Stay up to date

    See our latest milestones on our - Press page, and subscribe to the - Press page, and subscribe to the + Caltrans Mobility Newsletter, a free biweekly resource with frequent Cal-ITP project updates. diff --git a/src/_includes/header.html b/src/_includes/header.html index 754cdaf44..fd08db14b 100644 --- a/src/_includes/header.html +++ b/src/_includes/header.html @@ -19,7 +19,7 @@

      - {% include link_repeater.html list_class="nav-item" menu_items=site.navigation.header anchor_class="nav-link h4 mb-0 d-block rounded-1 text-nowrap" %} + {% include link_repeater.html list_class="nav-item" menu_items=site.navigation.header anchor_class="nav-link h5 mb-0 d-block rounded-1 text-nowrap" %}
    diff --git a/src/_includes/home-stats.html b/src/_includes/home-stats.html index 6fc3234ff..750d3e19d 100644 --- a/src/_includes/home-stats.html +++ b/src/_includes/home-stats.html @@ -22,34 +22,34 @@

    Impact across California

    -
    -

    68%

    -

    +

    +

    68%

    +

    Increase in reduced-fare transactions1

    - Learn how Monterey-Salinas Transit made it simpler to access transit benefits.
    -
    -

    229,988

    -

    +

    +

    229,988

    +

    Trips using a contactless credit/debit card2

    - Read how Glenn County is implementing contactless payments.
    -
    -

    91%

    -

    +

    +

    91%

    +

    Reduction of expired GTFS Schedule Feeds3

    - Learn more about Ventura County’s success with GTFS.
    @@ -57,7 +57,7 @@

    Impact across California

    -
    +
    1. Average month over month increase in reduced-fare transactions for older adults and veterans who used Cal-ITP Benefits @@ -66,13 +66,13 @@

      Impact across California

    2. Year to date, 2024. Cal-ITP Contactless Usage Dashboard ↩
    3. Since 2023. - Transit Data Quality Dashboard ↩ diff --git a/src/_includes/initiatives.html b/src/_includes/initiatives.html index fe75eeab7..cc0009fba 100644 --- a/src/_includes/initiatives.html +++ b/src/_includes/initiatives.html @@ -51,13 +51,13 @@

      {{ {% for paragraph in initiative.paragraphs %}

      {{ paragraph }}

      {% endfor %}
      {{ initiative.button.text }} + class="btn btn-outline-light fw-bold mt-2 mb-28 mb-md-40 {{ initiative.button.class }}">{{ initiative.button.text }}

    -

    Recent News

    +

    Recent News

    {% assign all_press = site.press | reverse %} {% for press in all_press %} @@ -81,7 +81,7 @@

    Recent News

    -

    Resources

    +

    Resources

    {% assign all_resources = site.resources | reverse %} {% for resource in all_resources %} diff --git a/src/_includes/styles.html b/src/_includes/styles.html index 2832e1071..ad69aa44b 100644 --- a/src/_includes/styles.html +++ b/src/_includes/styles.html @@ -4,9 +4,9 @@ - +{% if page.stylesheet %}{% endif %} diff --git a/src/_layouts/press.html b/src/_layouts/press.html index 57c86e820..208d9bcdb 100644 --- a/src/_layouts/press.html +++ b/src/_layouts/press.html @@ -16,8 +16,7 @@
    - Press + Press

    {{ page.heading }}

    {% if page.lead %}

    {{ page.lead }}

    {% endif %}
    diff --git a/src/_layouts/resource.html b/src/_layouts/resource.html index d64d0c9b8..7091b308b 100644 --- a/src/_layouts/resource.html +++ b/src/_layouts/resource.html @@ -17,8 +17,7 @@
    - Resource + Resource

    {{ page.title }}

    {{ date }}

    diff --git a/src/_press/cal-itp-first-net-cellular-plans.md b/src/_press/cal-itp-first-net-cellular-plans.md index 97780cb99..b6eca1ae2 100644 --- a/src/_press/cal-itp-first-net-cellular-plans.md +++ b/src/_press/cal-itp-first-net-cellular-plans.md @@ -33,7 +33,7 @@ tiered in three cellular data levels to accommodate transit providers’ varying operations. With this plan, transit agencies will be able to afford the data plans necessary to continue bringing the best service to their riders into the future. -_(\* None of these plans includes customer WiFi, as only transit operational needs qualify for the first-responder network. If customer-facing WiFi is desired, commercial plans through CALNET are also available on the [California Mobility Marketplace](https://www.camobilitymarketplace.org/contracts/).)_ +(* None of these plans includes customer WiFi, as only transit operational needs qualify for the first-responder network. If customer-facing WiFi is desired, commercial plans through CALNET are also available on the [California Mobility Marketplace](https://www.camobilitymarketplace.org/contracts/).) The monthly pricing for each of these FirstNet plans is based on which data level an agency selects as well as the cumulative total number of SIMs (subscriber identity @@ -42,27 +42,27 @@ modules, the smart cards that store identification information to pinpoint a dev - - - - + + + + - + - + - + diff --git a/src/_press/valleycan-preloaded-reloadable-ev-charging.md b/src/_press/valleycan-preloaded-reloadable-ev-charging.md index e7d67c034..acf48b488 100644 --- a/src/_press/valleycan-preloaded-reloadable-ev-charging.md +++ b/src/_press/valleycan-preloaded-reloadable-ev-charging.md @@ -91,7 +91,7 @@ the build-out of infrastructure across the state. For more information about this demonstration project, contact [Alexander.Guendulain@valleycan.org](mailto:Alexander.Guendulain@valleycan.org). -About this demonstration project’s stakeholders +## About this demonstration project’s stakeholders **Valley CAN** diff --git a/src/customer-stories.html b/src/customer-stories.html index a4b073f9a..5ddad5e54 100644 --- a/src/customer-stories.html +++ b/src/customer-stories.html @@ -2,13 +2,14 @@ layout: default permalink: /customer-stories title: Customer stories +stylesheet: customer-stories.css footer-class: absolute-footer --- {% include clipped-header.html %}
    -
    +

    Our customers

    @@ -19,16 +20,16 @@

    Our customers

    -

    Why it matters

    +

    Why it matters

    -

    Network of agencies

    +

    Network of agencies

    -
    -

    Why it matters

    - 1.88M +
    +

    Why it matters

    + 1.88M

    Daily transit rides in CA Why it matt

    -
    - 230+ +
    + 230+

    Transit agencies in CA; all can leverage Cal-ITP2

    -
    -

    Network of agencies

    +
    +

    Network of agencies

    A map of California with the location of over 230 transit agencies.Network of
    @@ -109,16 +110,16 @@

    Selected agency highlights

    class="rounded-2 w-100" src="/images/stories-photo-vctc.jpg" />
    -
    +
    “As a small agency who doesn’t have the resources to be specialists in these areas, we’re able to leverage Cal-ITP’s support to get complicated tech projects done more quickly…or at all.”
    — Public Transit Director in Ventura County
    -

    GTFS

    - Ventura County Transportation Commission + Ventura County Transportation Commission
    • Fleet size: 41
    • Services operated: fixed-route, paratransit
      • @@ -150,9 +151,9 @@

      Selected agency highlights

      class="rounded-2 w-100" src="/images/stories-photo-glenn.png" />
    -

    Contactless payments

    - Glenn County Transportation Division + Glenn County Transportation Division
    • Fleet size: 13
    • Services operated: fixed-route, paratransit
      • @@ -173,7 +174,7 @@

      Selected agency highlights

      This dedicated support is designed to help Glenn County make informed decisions, meet their deadlines, and set them up for a successful contactless payments launch.

      -
      +
      “Our county’s situation may be a bit more unique than other jurisdictions, requiring more handholding, but Cal-ITP’s assistance hasn’t wavered. They’ve navigated us throughout this process and provided crucial resources—that’s more @@ -201,15 +202,15 @@

      Selected agency highlights

      -
      -

      Our impact

      +
      +

      Our impact

      Over the last 5 years, Cal-ITP has worked collaboratively with our customers to make progress toward the following goals:

      -

      10+

      +

      10+

      Number of Our impact

      -

      57%

      +

      57%

      Increase in number of agencies we helped from 2023 to 2024

      -

      91%

      +

      91%

      Reduction in amount of expired GTFS Schedule Feeds since 2023Our impact

      -

      Simplified rider experience

      +

      Simplified rider experience

      Through tap to pay, benefit eligibility policy standardization, GTFS, and more

      @@ -243,9 +244,9 @@

      Our impact

      -

      Benefits

      - Monterey-Salinas Transit + Monterey-Salinas Transit
      • Fleet size: 170
      • Services operated: fixed-route, paratransit
        • @@ -282,7 +283,7 @@

        Our impact

        class="link-body-emphasis fw-normal">Benefits Monthly Update         to learn more and to stay connected as we expand.

        -
        +
        “The Cal-ITP team is wonderful to work with. We greatly appreciate their support, technical expertise, and collaboration!” @@ -307,7 +308,7 @@

        Get in touch today to see how Cal-IT -
        +
        E-mail hello@calitp.org to connect with the Cal-ITP team.

        @@ -327,20 +328,20 @@

        1. - Federal Transit Administration ↩
        2. Cal-ITP Mobility Marketplace: California transit providers ↩
        3. Since 2023. - Transit Data Quality Dashboard ↩ diff --git a/src/dsdl.html b/src/dsdl.html new file mode 100644 index 000000000..ef36e9fbc --- /dev/null +++ b/src/dsdl.html @@ -0,0 +1,326 @@ +--- +title: DSDL demo +layout: default +stylesheet: dsdl-demo.css +--- + +{% comment %} TODO: Remove when stylesheet is included sitewide. {% endcomment %} + + +{% comment %} djlint:off {% endcomment %} + +
          + + {% include clipped-header.html %} + +
          +
          +
          +

          Digital Services Design Language demo page

          +

          + This page showcases the elements of the Digital Services Design Language (DSDL) that are currently implemented. +

          +
          +
          +
          + +

          Color palette

          + +

          Brand colors

          + +
            +
          • +

            Cal-ITP Blue

            +
            (blue 70)
            +
            • +
          • +

            Cal-ITP Cyan

            +
            (cyan 40)
            +
            • +
          • +

            Cal-ITP Yellow

            +
            (yellow 30)
            +
            • +
          + +

          Full range

          + +
          + {% comment %} Start the first color group's list, storing its group name in current_group {% endcomment %} + {% assign current_group = site.data.dsdl_colors[0].group %} +
            + {% for color in site.data.dsdl_colors %} + {% comment %} Loop through every color in _data/dsdl_colors.yml {% endcomment %} + + {% if color.group != current_group %} {% comment %} If we have changed groups, start a new list {% endcomment %} +
          +
            + {% endif %} + + {% assign current_group = color.group %} + + {% comment %} Output the individual color swatch {% endcomment %} +
          1. + {{ color.group }} {{ color.level }} +
            2. + + {% endfor %} + + {% comment %} Close the last color group's list {% endcomment %} +
          +
          + +

          Typography

          + +

          Fonts

          + +

          Space Grotesk

          + +

          + Space Grotesk is a proportional sans-serif typeface with modern feeling and strong readability. It has a sense of urbanity and trustworthiness, with strong, clean lines. It is used for headings and display text on Cal-ITP websites. +

          + + See it on Google Fonts + +

          Noto Sans

          + +

          + Noto is designed specifically for accessibility and global communication, offering high-quality fonts with various weights and widths in sans, serif, mono, and other styles. This font family supports over 1,000 languages and 150 scripts. It’s a contemporary, aesthetic font with high reading eligibility. It supports scripts of CA’s main languages: English, Spanish, Mandarin + Cantonese, Tagalog, Vietnamese, Korean, Armenian, Arabic, Russian, Farsi, Hindi, and Japanese. It is used for body copy on Cal-ITP websites. +

          + + See it on Google Fonts + +

          Source Code Pro

          + +

          + Source Code Pro is an open-source monospace typeface designed to work well in user interface and coding environments. It is used on Cal-ITP websites when fixed-width type is appropriate, such as displaying code. +

          + + See it on Google Fonts + +

          Core styles

          + +

    Tier
    # of SIMs    		Tier 1
    (< 2,999 SIMs)    		Tier 2
    (3,000-9,999 SIMs)    		Tier 3
    (> 10,000 SIMs)    		Tier
    # of SIMs    		Tier 1
    (< 2,999 SIMs)    		Tier 2
    (3,000-9,999 SIMs)    		Tier 3
    (> 10,000 SIMs)
    1GB Plan
    (monthly cost per SIM)    		1GB Plan
    (monthly cost per SIM)    		 $10.00 $7.50 $4.99
    3GB Plan
    (monthly cost per SIM)    		3GB Plan
    (monthly cost per SIM)    		 $25.00 $20.00 $14.99
    Unlimited Plan
    (monthly cost per SIM)    		Unlimited Plan
    (monthly cost per SIM)    		 $35.00 $35.00 $29.99
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    HeadlineTitleSubtitleBody
    Large +
    +
    font-size
    +
    40px
    +
    font-weight
    +
    700
    +
    line-height
    +
    1.25
    +
    +
    Amazingly few discotheques provide jukeboxes.
    +     		+
    +
    font-size
    +
    32px
    +
    font-weight
    +
    600
    +
    line-height
    +
    1.25
    +
    +
    Amazingly few discotheques provide jukeboxes.
    +     		+
    +
    font-size
    +
    24px
    +
    font-weight
    +
    500
    +
    line-height
    +
    1.25
    +
    +
    Amazingly few discotheques provide jukeboxes.
    +     		+
    +
    font-size
    +
    16px
    +
    font-weight
    +
    400
    +
    line-height
    +
    1.5
    +
    +
    Amazingly few discotheques provide jukeboxes.
    +
    Medium +
    +
    font-size
    +
    32px
    +
    font-weight
    +
    700
    +
    line-height
    +
    1.25
    +
    +
    Amazingly few discotheques provide jukeboxes.
    +     		+
    +
    font-size
    +
    24px
    +
    font-weight
    +
    600
    +
    line-height
    +
    1.25
    +
    +
    Amazingly few discotheques provide jukeboxes.
    +     		+
    +
    font-size
    +
    20px
    +
    font-weight
    +
    500
    +
    line-height
    +
    1.5
    +
    +
    Amazingly few discotheques provide jukeboxes.
    +     		+
    +
    font-size
    +
    14px
    +
    font-weight
    +
    400
    +
    line-height
    +
    1.625
    +
    +
    Amazingly few discotheques provide jukeboxes.
    +
    Small +
    +
    font-size
    +
    24px
    +
    font-weight
    +
    700
    +
    line-height
    +
    1.25
    +
    +
    Amazingly few discotheques provide jukeboxes.
    +     		+
    +
    font-size
    +
    16px
    +
    font-weight
    +
    600
    +
    line-height
    +
    1.5
    +
    +
    Amazingly few discotheques provide jukeboxes.
    +     		+
    +
    font-size
    +
    16px
    +
    font-weight
    +
    500
    +
    line-height
    +
    1.5
    +
    +
    Amazingly few discotheques provide jukeboxes.
    +     		+
    +
    font-size
    +
    12px
    +
    font-weight
    +
    400
    +
    line-height
    +
    1.625
    +
    +
    Amazingly few discotheques provide jukeboxes.
    +
    + +
      +
    • +

      Display

      +
      +
      font-size
      +
      64px
      +
      font-weight
      +
      600
      +
      line-height
      +
      1.125
      +
      +
      Amazingly few discotheques provide jukeboxes.
      +
      • +
    • +

      Small caps

      +
      +
      font-size
      +
      12px
      +
      font-weight
      +
      400
      +
      line-height
      +
      1.625
      +
      text-transform
      +
      uppercase
      +
      +
      Amazingly few discotheques provide jukeboxes.
      +
      • +
    • +

      Caption

      +
      +
      font-size
      +
      12px
      +
      font-weight
      +
      400
      +
      line-height
      +
      1.625
      +
      +
      Amazingly few discotheques provide jukeboxes.
      +
      • +
    • +

      Footnote

      +
      +
      font-size
      +
      10px
      +
      font-weight
      +
      400
      +
      line-height
      +
      1.625
      +
      +
      Amazingly few discotheques provide jukeboxes.
      +
      • +
    • +

      Code

      +
      +
      font-size
      +
      16px
      +
      font-weight
      +
      400
      +
      line-height
      +
      1.625
      +
      +
      Amazingly few discotheques provide jukeboxes.
      +
      • +
    + +
    diff --git a/src/index.html b/src/index.html index 3c77a305e..9291c7510 100644 --- a/src/index.html +++ b/src/index.html @@ -1,10 +1,11 @@ --- title: Home layout: default +stylesheet: homepage.css ---
    -
    +

    A modern and consistent transportation experience throughout California

    @@ -14,7 +15,7 @@

    A modern and consistent transportatio

    -
    +
    Helping California achieve critical g
      -
    1. +
    2. invites travelers toward more efficient and sustainable modes of travel;
      3. -
    3. +
    4. reduces operating costs for transit agencies;
      5. -
    5. simplifies every traveler’s life; and
      6. -
    6. +
    7. simplifies every traveler’s life; and
      8. +
    8. simultaneously welcomes every single person in this country to a seamless, user-friendly system—making paying for a transit ride just as easy as buying a cup of coffee.
      9. diff --git a/src/partners.html b/src/partners.html index 1ddb8fcf9..6a9dc0936 100644 --- a/src/partners.html +++ b/src/partners.html @@ -7,7 +7,7 @@ {% include clipped-header.html %}
      -
      +

      Partners

      @@ -48,7 +48,7 @@

      California Department of Technology

      target="_blank">California Department of Technology (CDT) to provide transit riders with a seamless way to qualify for and enroll in transit benefits online.

      -
      +
      “The Cal-ITP project offered us a test-case to deliver dependable and equitable public services, and reduce outdated paper-based processes.” @@ -83,8 +83,8 @@

      California Department of Technology

-
- 68% +
+ 68% Increase in reduced-fare transactions1 @@ -92,8 +92,8 @@

California Department of Technology

 
-
- 870 +
+ 870 Number of reduced-fare transactions enabled by the CA Identity Gateway
@@ -122,7 +122,7 @@

California Department of Technology

alt="" src="/images/partners-background-carb.png" />

California Air Resources Board

-
+
“In order to unlock the greenhouse gas reductions and mobility justice opportunities that transit provides, we have to make it easier for people to use California’s buses and trains. Cal-ITP tackles basic but essential challenges that transit users face so that more Californians can make the switch to sustainable transportation options.”
@@ -151,15 +151,15 @@

California Air Resources Board

-
- 2035 +
+ 2035 By 2035, all new cars & light trucks sold in CA must be zero emission
 
-
- 89% +
+ 89% of main industry players use contactless payment cards2 @@ -185,7 +185,7 @@

California Air Resources Board

  1. Reported in CARB’s contactless EMV report. ↩
    2. diff --git a/src/press.html b/src/press.html index 5c2ab94b6..a797a700e 100644 --- a/src/press.html +++ b/src/press.html @@ -16,7 +16,7 @@

    Press

    Below you’ll find news about Cal-ITP and our initiatives, including press releases and media coverage about new launches and project milestones. Interested in getting in touch? Reach out to us at hello@calitp.org.

    {% include pills.html tags=site.data.press_tags %} diff --git a/src/resources.html b/src/resources.html index ac16c6203..1c7230dfe 100644 --- a/src/resources.html +++ b/src/resources.html @@ -10,7 +10,7 @@ {% include clipped-header.html %}
    -
    +

    Resources

    @@ -18,7 +18,7 @@

    Resources

    what you’re looking for? Reach out to us at hello@calitp.org.

    {% include pills.html tags=site.data.resource_tags %} diff --git a/src/stylesheet.html b/src/stylesheet.html index e991025b7..2fa92d999 100644 --- a/src/stylesheet.html +++ b/src/stylesheet.html @@ -25,7 +25,7 @@

    Paragraph text with links

    Quotes

    -
    +
    “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” @@ -33,7 +33,7 @@

    Quotes

    - Lorem Ipsum, Manager at California State Transit
    -
    +
    “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” @@ -47,17 +47,15 @@

    Quotes

    Footnote

    1. Use class or element small with text-body-tertiary. For links, use - link-body-emphasis fs-7 fw-normal - for links + small link-body-emphasis fw-normal + for links

    Statistics

    - 309 + 309
    diff --git a/src/stylesheets/clipped-containers.css b/src/stylesheets/clipped-containers.css new file mode 100644 index 000000000..67678daea --- /dev/null +++ b/src/stylesheets/clipped-containers.css @@ -0,0 +1,96 @@ +.clipped-initiative, +.clipped-header, +.clipped-contact-start, +.clipped-contact-end, +.clipped-stat-start, +.clipped-stat-end, +.clipped-stories-contact, +.clipped-stories-impact, +.clipped-home-stat-1, +.clipped-home-stat-2, +.clipped-home-stat-3 { + -webkit-clip-path: none; + clip-path: none; + border-radius: 1.25rem; +} + +.clipped-contact-start, +.clipped-contact-end, +.clipped-stat-start, +.clipped-stat-end, +.clipped-home-stat-1, +.clipped-home-stat-2, +.clipped-home-stat-3 { + min-height: 100%; +} + +@media (min-width: 992px) { + .clipped-initiative, + .clipped-header, + .clipped-contact-start, + .clipped-contact-end, + .clipped-stat-start, + .clipped-stat-end, + .clipped-stories-contact, + .clipped-stories-impact, + .clipped-home-stat-1, + .clipped-home-stat-2, + .clipped-home-stat-3 { + border-radius: 0; + } + + .clipped-initiative { + -webkit-clip-path: url(#path-initiative); + clip-path: url(#path-initiative); + } + + .clipped-header { + -webkit-clip-path: url(#path-header); + clip-path: url(#path-header); + } + + .clipped-contact-start { + -webkit-clip-path: url(#path-contact-start); + clip-path: url(#path-contact-start); + } + + .clipped-contact-end { + -webkit-clip-path: url(#path-contact-end); + clip-path: url(#path-contact-end); + } + + .clipped-stat-start { + -webkit-clip-path: url(#path-stat-start); + clip-path: url(#path-stat-start); + } + + .clipped-stat-end { + -webkit-clip-path: url(#path-stat-end); + clip-path: url(#path-stat-end); + } + + .clipped-stories-contact { + -webkit-clip-path: url(#path-stories-contact); + clip-path: url(#path-stories-contact); + } + + .clipped-stories-impact { + -webkit-clip-path: url(#path-stories-impact); + clip-path: url(#path-stories-impact); + } + + .clipped-home-stat-1 { + -webkit-clip-path: url(#path-home-stat-1); + clip-path: url(#path-home-stat-1); + } + + .clipped-home-stat-2 { + -webkit-clip-path: url(#path-home-stat-2); + clip-path: url(#path-home-stat-2); + } + + .clipped-home-stat-3 { + -webkit-clip-path: url(#path-home-stat-3); + clip-path: url(#path-home-stat-3); + } +} diff --git a/src/stylesheets/customer-stories.css b/src/stylesheets/customer-stories.css new file mode 100644 index 000000000..b2155fa08 --- /dev/null +++ b/src/stylesheets/customer-stories.css @@ -0,0 +1,52 @@ +.link-tertiary { + color: var(--bs-tertiary-color); + font-size: var(--text-s); + font-weight: 400; + text-decoration: underline; +} + +.link-tertiary:hover, +.link-tertiary.active { + color: var(--bs-primary); + font-weight: 700; + text-decoration: none; +} + +@media (min-width: 992px) { + .stories-map { + height: 150px; + } + + .stories-toc { + top: calc(var(--header-nav-height) + 1.5rem); + } + + .impact { + z-index: 1025; + position: absolute; + left: 0; + } + + .monterey-and-contact, + .absolute-footer { + position: relative; + top: 620px; /* Height of the absolutely-positioned Impact section */ + } + + .impact-stats-parent { + margin-left: -190px; + background: transparent url(/images/stories-bg-gradient.png) repeat-y right / contain; + padding: 60px 0; + } +} + +@media (max-width: 992px) { + .stories-map { + width: 100%; + height: auto; + } + + .impact-stats { + margin: -80px auto 0 auto; + } +} diff --git a/src/stylesheets/dsdl-demo.css b/src/stylesheets/dsdl-demo.css new file mode 100644 index 000000000..1ca623d63 --- /dev/null +++ b/src/stylesheets/dsdl-demo.css @@ -0,0 +1,66 @@ +/* DSDL demo page */ + +.dsdl-demo h2, +.dsdl-demo h3, +.dsdl-demo h4 { + margin-top: 2rem; + margin-bottom: 1rem; +} +.brand-colors h4 { + margin-top: 0; +} + +.brand-colors, +.dsdl-colors { + display: flex; +} +.brand-colors, +.dsdl-colors ol { + list-style: none; + padding: 0; +} +.brand-colors li, +.dsdl-colors ol { + margin: 0 0.5rem 0 0; + flex: 1 1 auto; +} +.brand-colors li:last-child, +.dsdl-colors ol:last-child { + margin-right: 0 +} +.brand-colors li { + padding: 2rem; + text-align: center; +} +.dsdl-colors li { + padding: 1rem; + text-align: center; +} + +.dsdl-core-type-matrix th, +.dsdl-core-type-matrix td { + padding: 0.5rem; + border: 1px solid var(--dsdl-gray-20); +} +.dsdl-core-type-matrix th { + background: var(--calitp-brand-blue); + color: white; +} +.dsdl-core-type-matrix thead th { + text-align: center; +} +.dsdl-core-type-matrix td { + vertical-align: top; +} + +.dsdl-type-specs { + display: grid; + grid-template-columns: auto 1fr; +} +.dsdl-type-specs dd { + margin: 0 0 0 0.5rem; +} +.dsdl-extra-type-styles { + list-style: none; + padding: 0; +} diff --git a/src/stylesheets/dsdl/core.css b/src/stylesheets/dsdl/core.css new file mode 100644 index 000000000..d21c73af8 --- /dev/null +++ b/src/stylesheets/dsdl/core.css @@ -0,0 +1,157 @@ +/* + * Cal-ITP Digital Services Design Language + * Core Styles + */ + + +body { + color: var(--dsdl-body-color); + font-family: var(--dsdl-body-font-stack); + line-height: var(--line-height-normal); +} + +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + font-family: var(--dsdl-heading-font-stack); +} + +.text-body-s { + font-size: var(--text-xs); + line-height: var(--line-height-loose); + font-weight: 400; +} +.text-body-m { + font-size: var(--text-s); + line-height: var(--line-height-loose); + font-weight: 400; +} +.text-body-l { + font-size: var(--text-m); + line-height: var(--line-height-normal); + font-weight: 400; +} + +h6, +.h6, +.text-subtitle-s { + font-family: var(--dsdl-heading-font-stack); + font-size: var(--text-m); + line-height: var(--line-height-normal); + font-weight: 500; +} +h4, +.h4, +.text-subtitle-m { + font-family: var(--dsdl-heading-font-stack); + font-size: var(--text-l); + line-height: var(--line-height-normal); + font-weight: 500; +} +.text-subtitle-l { + font-family: var(--dsdl-heading-font-stack); + font-size: var(--text-xl); + line-height: var(--line-height-tight); + font-weight: 500; +} + +h5, +.h5, +.text-title-s { + font-family: var(--dsdl-heading-font-stack); + font-size: var(--text-m); + line-height: var(--line-height-normal); + font-weight: 600; +} +h3, +.h3, +.text-title-m { + font-family: var(--dsdl-heading-font-stack); + font-size: var(--text-xl); + line-height: var(--line-height-tight); + font-weight: 600; +} +.text-title-l { + font-family: var(--dsdl-heading-font-stack); + font-size: var(--text-xxl); + line-height: var(--line-height-tight); + font-weight: 600; +} + +.text-headline-s { + font-family: var(--dsdl-heading-font-stack); + font-size: var(--text-xl); + line-height: var(--line-height-tight); + font-weight: 700; +} +h2, +.h2, +.text-headline-m { + font-family: var(--dsdl-heading-font-stack); + font-size: var(--text-xxl); + line-height: var(--line-height-tight); + font-weight: 700; +} +h1, +.h1, +.text-headline-l { + font-family: var(--dsdl-heading-font-stack); + font-size: var(--text-xxxl); + line-height: var(--line-height-tight); + font-weight: 700; +} + +.text-display { + font-family: var(--dsdl-heading-font-stack); + font-size: var(--text-display); + line-height: var(--line-height-extra-tight); + font-weight: 600; +} +.text-small-caps { + /* TODO: Consider eliminating this as its own core style, making it more of a utility, + because sometimes we want to apply smallcaps to other styles, + e.g.: calitp.org homepage initiatives Recent News and Resources h4 elements. */ + font-size: var(--text-xs); + line-height: var(--line-height-loose); + font-weight: 400; + text-transform: uppercase; +} +small, +.small, +.text-caption { + font-size: var(--text-xs); + line-height: var(--line-height-loose); + font-weight: 400; +} +.text-footnote { + font-size: var(--text-xxs); + line-height: var(--line-height-loose); + font-weight: 400; +} +.text-code { + font-family: var(--dsdl-monospace-font-stack); + font-size: var(--text-m); + line-height: var(--line-height-loose); + font-weight: 400; +} + +a { + color: var(--dsdl-blue-70); +} +a:hover, +a:focus { + color: var(--dsdl-blue-80); +} + +b, +strong { + font-weight: 600; +} + +code, +pre { + font-family: var(--dsdl-monospace-font-stack); +} diff --git a/src/stylesheets/dsdl/dsdl.css b/src/stylesheets/dsdl/dsdl.css new file mode 100644 index 000000000..a3da87943 --- /dev/null +++ b/src/stylesheets/dsdl/dsdl.css @@ -0,0 +1,7 @@ +/* + * Cal-ITP Digital Services Design Language + */ + +@import 'tokens.css'; +@import 'core.css'; +@import 'utilities.css'; diff --git a/src/stylesheets/dsdl/tokens.css b/src/stylesheets/dsdl/tokens.css new file mode 100644 index 000000000..a18482d2d --- /dev/null +++ b/src/stylesheets/dsdl/tokens.css @@ -0,0 +1,56 @@ +--- +# Empty front matter to enable Liquid processing +--- + +/* + * Cal-ITP Digital Services Design Language + * Design Tokens + */ + + +/* TYPOGRAPHY */ + +/* Import webfonts */ +/* Space Grotesk: Variable weight, 400–700 */ +/* Source Code Pro: 400 only */ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400..800;1,400..800&family=Source+Code+Pro&family=Space+Grotesk:wght@400..700&display=swap'); + +:root { + /* Fonts */ + --dsdl-heading-font-stack: 'Space Grotesk', system-ui; + --dsdl-body-font-stack: 'Noto Sans', system-ui; + --dsdl-monospace-font-stack: 'Source Code Pro', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace; + + /* Size */ + --text-xxs: calc(10rem / 16); + --text-xs: calc(12rem / 16); + --text-s: calc(14rem / 16); + --text-m: calc(16rem / 16); + --text-l: calc(20rem / 16); + --text-xl: calc(24rem / 16); + --text-xxl: calc(32rem / 16); + --text-xxxl: calc(40rem / 16); + --text-display: calc(64rem / 16); + + /* Line height */ + --line-height-extra-tight: 1.125; + --line-height-tight: 1.25; + --line-height-normal: 1.5; + --line-height-loose: 1.625; + + /* Colors */ + --dsdl-body-color: var(--dsdl-gray-100); +} + + +/* COLORS */ + +:root { + {% for color in site.data.dsdl_colors -%} + --dsdl-{{ color.group }}-{{ color.level }}: {{ color.value }}; + {% endfor %} + + --calitp-brand-blue: var(--dsdl-blue-70); /* #045b86 */ + --calitp-brand-cyan: var(--dsdl-cyan-40); /* #38abd0 */ + --calitp-brand-yellow: var(--dsdl-yellow-30); /* #febd28 */ +} diff --git a/src/stylesheets/dsdl/utilities.css b/src/stylesheets/dsdl/utilities.css new file mode 100644 index 000000000..5588af2e2 --- /dev/null +++ b/src/stylesheets/dsdl/utilities.css @@ -0,0 +1,30 @@ +/* + * Cal-ITP Digital Services Design Language + * Utility Classes + */ + +.font-size-xxs { font-size: var(--text-xxs) !important; } +.font-size-xs { font-size: var(--text-xs) !important; } +.font-size-s { font-size: var(--text-s) !important; } +.font-size-m { font-size: var(--text-m) !important; } +.font-size-l { font-size: var(--text-l) !important; } +.font-size-xl { font-size: var(--text-xl) !important; } +.font-size-xxl { font-size: var(--text-xxl) !important; } +.font-size-xxxl { font-size: var(--text-xxxl) !important; } +.font-size-display { font-size: var(--text-display) !important; } + +.font-weight-normal { font-weight: 400 !important; } +.font-weight-semi-bold { font-weight: 500 !important; } +.font-weight-bold { font-weight: 600 !important; } +.font-weight-extra-bold { font-weight: 700 !important; } + +.line-height-extra-tight { line-height: 1.125 !important; } +.line-height-tight { line-height: 1.25 !important; } +.line-height-normal { line-height: 1.5 !important; } +.line-height-loose { line-height: 1.625 !important; } + +.text-brand-blue { color: var(--calitp-brand-blue); } + +.font-heading { font-family: var(--dsdl-heading-font-stack); } +.font-body { font-family: var(--dsdl-body-font-stack); } +.font-monospace { font-family: var(--dsdl-monospace-font-stack); } diff --git a/src/stylesheets/footnotes.css b/src/stylesheets/footnotes.css new file mode 100644 index 000000000..6881ff64b --- /dev/null +++ b/src/stylesheets/footnotes.css @@ -0,0 +1,41 @@ +.footnotes ol { + padding-left: 1rem; +} + +.footnotes ol::before { + content: "Footnotes"; + display: block; + font-weight: 700; + margin-bottom: 0.5rem; + margin-left: -1rem; +} + +.footnotes.no-title ol::before { + content: ""; +} + +.footnotes a, +.footnotes li, +.footnotes p { + font-size: var(--text-xs); +} + +.footnotes li:target { + animation: footnoteFade 5s 1; +} + +*[role="doc-noteref"], +*[role="doc-endnote"] { + /* Magic calculation that is the header's height and some extra padding */ + scroll-margin-top: calc(110px + 20px); +} + +@keyframes footnoteFade { + 0% { + background-color: var(--dsdl-yellow-20); + } + + 100% { + background-color: transparent; + } +} diff --git a/src/stylesheets/homepage.css b/src/stylesheets/homepage.css new file mode 100644 index 000000000..678e367d2 --- /dev/null +++ b/src/stylesheets/homepage.css @@ -0,0 +1,57 @@ +.hero-header { + max-width: 441px; +} + +.rainbow-list ol { + list-style: none; + counter-reset: numList; +} + +.rainbow-list ol li:before { + counter-increment: numList; + content: counter(numList); + text-align: center; + color: white; + line-height: 40px; + width: 40px; + height: 40px; + border-radius: 50%; + flex-shrink: 0; +} + +.rainbow-list ol li:nth-child(1):before { + background: var(--calitp-brand-blue); +} + +.rainbow-list ol li:nth-child(2):before { + background: var(--dsdl-orange-60); +} + +.rainbow-list ol li:nth-child(3):before { + background: var(--dsdl-red-70); +} + +.rainbow-list ol li:nth-child(4):before { + background: var(--dsdl-purple-70); +} + +/* Initiatives */ + +.scroll-link { + scroll-margin-top: 240px; +} + +.tab-list .press-item:nth-child(n + 4), +.tab-list .resource:nth-child(n + 4) { + display: none; +} + +.tab-content h4 { + display: inline-block; + padding: 0.35rem 1rem; + border: 1.5px solid white; + margin-bottom: 1rem; + background-color: rgb(38 38 38 / 0.2); /* gray 80 at 20% opacity */ + color: white; + font-weight: 700; /* overrides .text-small-caps weight assignment */ +} diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css index 6fafc30fd..ae33567a3 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -1,77 +1,30 @@ -:root { - --bs-font-sans-serif: "Poppins", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans", - "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --calitp-headline-sans-serif: "Raleway", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans", - "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --bs-border-radius: 20px; - --bs-border-style: dashed; - --bs-body-line-height: 1.4; - --header-nav-height: 110px; - --footer-nav-height: 39px; -} - -body { - --bs-primary: #045b86; - --bs-primary-rgb: 4, 91, 134; - --bs-body-color: rgb(33, 33, 33); /* #212121 */ - --bs-dark-rgb: 33, 33, 33; /* #212121 */ - --bs-emphasis-color-rgb: rgb(33, 33, 33); /* #212121 */ - --bs-link-color: rgb(4, 91, 134); /* #045B86, calitp-primary-blue */ - --bs-link-color-rgb: 4, 91, 134; /* #045B86, calitp-primary-blue */ - --bs-link-hover-color: rgb(4, 72, 105); /* #044869, calitp-primary-dark-blue */ - --bs-link-hover-color-rgb: 4, 72, 105; /* #044869, calitp-primary-dark-blue */ - --bs-secondary-rgb: 143, 147, 153; /* calitp-gray-3 */ - --bs-tertiary-color: rgb(96, 101, 107); /* calitp-scales-gray-4 */ - --calitp-primary-blue: rgb(4, 91, 134); /* #045B86 */ - --calitp-primary-dark-blue: rgb(4, 72, 105); /* #044869, , calitp-primary-dark-blue */ - --calitp-background-blue: rgb(245, 249, 251); /* #F5F9FB */ - --calitp-background-light-blue: rgb(223, 242, 242); /* #DFF2F2 */ - --calitp-cyan-1: rgb(213, 238, 245); /* #d5eef5 */ - --calitp-gray-2: rgb(200, 200, 201); /* #C8C8C9 */ - --calitp-green-4: rgb(0, 117, 91); /* #00755b */ - --calitp-green-5: rgb(0, 73, 57); /* #004939 */ - --calitp-orange-5: rgb(178, 86, 0); /* #b25600 */ - --calitp-purple-4: rgb(82, 76, 143); /* #524c8f */ - --calitp-purple-5: rgb(41, 34, 120); /* #292278 */ - --calitp-red-4: rgb(192, 63, 77); /* #c03f4d */ - --calitp-red-5: rgb(160, 46, 59); /* #a02e3b */ - --calitp-yellow-4: rgb(253, 183, 20); /* #FDB714 */ - --calitp-font-weight-bold: 700; -} - -@media print { - main.container { - padding-top: 1rem !important; - } - - .col-lg-8 { - width: 100% !important; - } +@import 'dsdl/dsdl.css'; +@import 'variables.css'; +@import 'clipped-containers.css'; +@import 'footnotes.css'; +@import 'nav-pills.css'; +@import 'navbar.css'; +@import 'print.css'; - .press-release p, - .press-release a { - font-size: 0.875rem !important; - } -} .background-calitp-blue { - background-color: var(--calitp-primary-blue); + background-color: var(--calitp-brand-blue); } -.background-purple-4 { - background-color: var(--calitp-purple-4); +.background-purple-70 { + background-color: var(--dsdl-purple-70); } -.background-yellow-4 { - background-color: var(--calitp-yellow-4); +.background-yellow-30 { + background-color: var(--dsdl-yellow-30); } -.border-purple-4 { - border-color: var(--calitp-purple-4); +.border-purple-70 { + border-color: var(--dsdl-purple-70); } -.border-yellow-4 { - border-color: var(--calitp-yellow-4); +.border-yellow-30 { + border-color: var(--dsdl-yellow-30); } .min-w-0 { @@ -82,81 +35,23 @@ body { --bs-btn-border-width: 2px; } -h1, -.h1, -h2, -.h2, -h3, -.h3, -h4, -.h4 { - font-family: var(--calitp-headline-sans-serif); -} - h1, .h1 { - font-size: calc(40rem / 16); - font-weight: var(--calitp-font-weight-bold); margin-bottom: 19px; } -h2, -.h2 { - font-size: 2rem; -} - -h3, -.h3 { - font-size: calc(24rem / 16); -} - -h4, -.h4 { - font-weight: var(--calitp-font-weight-bold); - line-height: var(--bs-body-line-height); -} - -.display-heading { - font-family: var(--calitp-headline-sans-serif); -} - -p, -a, -li { - font-size: 1rem; -} - hr { margin-top: 2rem; margin-bottom: 2rem; } -.small-caps { - text-transform: uppercase; - line-height: var(--bs-body-line-height); +.text-small-caps { + /* TODO: Consider adding to DSDL definition. */ letter-spacing: 0.025em; - display: inline-block; - padding: 0.35rem 1rem; - font-size: 0.75rem; - font-family: var(--bs-font-sans-serif); - border: 1.5px solid var(--bs-white); - background-color: rgba(33, 33, 33, 0.2); -} - -.fs-7 { - font-size: calc(14rem / 16); -} - -.fs-stats { - font-size: calc(64rem / 16); - font-family: var(--calitp-headline-sans-serif); -} - -.font-poppins { - font-family: var(--bs-font-sans-serif); } a { + /* TODO: Probably stop setting this font-weight, given that we override it half the time? */ font-weight: 700; text-decoration: underline; text-underline-offset: 1px; @@ -167,19 +62,6 @@ a:hover { text-decoration-style: dotted; } -.link-tertiary { - color: var(--bs-tertiary-color); - text-decoration: underline; - font-weight: normal; -} - -.link-tertiary:hover, -.link-tertiary.active { - color: var(--bs-primary); - text-decoration: none; - font-weight: 700; -} - figure.quote { border-left-width: 3px; border-left-style: solid; @@ -187,234 +69,13 @@ figure.quote { } figure.quote figcaption { - font-size: calc(16rem / 16); + font-size: var(--text-m); + /* TODO: Revisit use of faux italics with Space Grotesk */ font-style: italic; } -.navbar { - --bs-navbar-padding-y: 0; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04); -} - -.navbar-nav { - --bs-nav-link-color: var(--bs-body-color); - --bs-navbar-active-color: var(--calitp-primary-blue); - --bs-nav-link-hover-color: var(--calitp-primary-blue); -} - -header .nav-link { - padding: 2rem 0; -} - -header .nav-link[aria-current="page"] { - color: var(--calitp-primary-blue); - background-color: var(--calitp-background-light-blue); -} - -header .nav-link:hover { - background-color: var(--calitp-background-light-blue); -} - -main.container { - padding-top: var(--header-nav-height); -} - -[id] { - scroll-margin-top: var(--header-nav-height); -} - footer a:hover { - color: var(--calitp-gray-2) !important; -} - -/* Press Release */ - -.press-release h2, -.press-release h3 { - font-size: var(--bs-body-font-size); - padding-top: 20px; - font-weight: var(--calitp-font-weight-bold); - font-family: var(--bs-font-sans-serif); -} - -.press-release h2:last-of-type { - text-decoration: underline; -} - -.press-release img { - display: block; - max-width: 100%; -} - -.press-release figcaption p { - font-size: 0.875em; - font-style: italic; - text-align: center; -} - -.press-release sup a { - font-size: 1em; - margin: 0 0.15em; -} - -.footnotes ol { - padding-left: 1rem; -} - -.footnotes ol::before { - content: "Footnotes"; - display: block; - font-weight: bold; - margin-bottom: 0.5rem; - margin-left: -1rem; -} - -.footnotes.no-title ol::before { - content: ""; -} - -.footnotes a, -.footnotes li, -.footnotes p { - font-size: 0.85rem; -} - -.footnotes li:target { - animation: footnoteFade 5s 1; -} - -*[role="doc-noteref"], -*[role="doc-endnote"] { - /* Magic calculation that is the header's height and some extra padding */ - scroll-margin-top: calc(110px + 20px); -} - -@keyframes footnoteFade { - 0% { - background-color: rgb(255 255 185 / 1); - } - - 100% { - background-color: rgb(255 255 185 / 0); - } -} - -/* Home Page */ - -.hero-header { - max-width: 441px; -} - -.tab-list .press-item:nth-child(n + 4), -.tab-list .resource:nth-child(n + 4) { - display: none; -} - -.rainbow-list ol { - list-style: none; - counter-reset: numList; -} - -.rainbow-list ol li:before { - counter-increment: numList; - content: counter(numList); - text-align: center; - color: var(--bs-white); - line-height: 40px; - width: 40px; - height: 40px; - border-radius: 50%; - flex-shrink: 0; -} - -.rainbow-list ol li:nth-child(1):before { - background: var(--calitp-primary-blue); -} - -.rainbow-list ol li:nth-child(2):before { - background: var(--calitp-orange-5); -} - -.rainbow-list ol li:nth-child(3):before { - background: var(--calitp-red-5); -} - -.rainbow-list ol li:nth-child(4):before { - background: var(--calitp-purple-4); -} - -.nav-pills { - --bs-nav-pills-border-radius: 19px; -} - -.nav-pills .nav-link { - padding: 4px 8px; - border-width: 2px; - border-style: solid; -} - -.scroll-link { - scroll-margin-top: 240px; -} - -.black-on-white .nav-pills { - --bs-nav-pills-link-active-color: var(--bs-white); - --bs-nav-pills-link-active-bg: var(--bs-body-color); -} - -.black-on-white .nav-pills .nav-link { - border-color: var(--bs-body-color); -} - -.black-on-white .nav-pills .nav-link:not(.active) { - color: var(--bs-body-color); -} - -.black-on-white .nav-pills .nav-link:hover { - border-color: rgba(33, 33, 33, 0.8); -} - -.white-on-color .nav-pills { - --bs-nav-pills-link-active-color: var(--bs-body-color); - --bs-nav-pills-link-active-bg: var(--bs-white); -} - -.white-on-color .nav-pills .nav-link { - border-color: var(--bs-white); -} - -.white-on-color .nav-pills .nav-link:not(.active) { - color: var(--bs-white); -} - -.white-on-color .nav-pills .nav-link:hover { - border-color: rgba(var(--bs-white-rgb), 0.8); -} - -.clipped-initiative, -.clipped-header, -.clipped-contact-start, -.clipped-contact-end, -.clipped-stat-start, -.clipped-stat-end, -.clipped-stories-contact, -.clipped-stories-impact, -.clipped-home-stat-1, -.clipped-home-stat-2, -.clipped-home-stat-3 { - -webkit-clip-path: none; - clip-path: none; - border-radius: 1.25rem; -} - -.clipped-contact-start, -.clipped-contact-end, -.clipped-stat-start, -.clipped-stat-end, -.clipped-home-stat-1, -.clipped-home-stat-2, -.clipped-home-stat-3 { - min-height: 100%; + color: var(--dsdl-gray-30) !important; } .mb-28 { @@ -422,189 +83,29 @@ footer a:hover { } @media (min-width: 992px) { - .fs-0 { - font-size: calc(64rem / 16); - font-family: var(--calitp-headline-sans-serif); - } .h1-md { - font-size: calc(40rem / 16); - } - - .navbar { - --bs-navbar-nav-link-padding-x: 40px; - --bs-navbar-nav-link-padding-y: 0; - } - - .navbar-brand { - --bs-navbar-brand-padding-x: 2rem; - --bs-navbar-brand-padding-y: 2rem; - } - - .navbar-nav { - --bs-nav-link-color: var(--bs-body-color); - --bs-navbar-nav-link-padding-y: 0; - --bs-nav-link-padding-y: 0; - gap: 2rem; - } - - main.container { - min-height: calc(100vh - var(--footer-nav-height)); - } - - footer a { - line-height: var(--footer-nav-height); - } - - .clipped-initiative, - .clipped-header, - .clipped-contact-start, - .clipped-contact-end, - .clipped-stat-start, - .clipped-stat-end, - .clipped-stories-contact, - .clipped-stories-impact, - .clipped-home-stat-1, - .clipped-home-stat-2, - .clipped-home-stat-3 { - border-radius: 0; - } - - .clipped-initiative { - -webkit-clip-path: url(#path-initiative); - clip-path: url(#path-initiative); - } - - .clipped-header { - -webkit-clip-path: url(#path-header); - clip-path: url(#path-header); - } - - .clipped-contact-start { - -webkit-clip-path: url(#path-contact-start); - clip-path: url(#path-contact-start); - } - - .clipped-contact-end { - -webkit-clip-path: url(#path-contact-end); - clip-path: url(#path-contact-end); - } - - .clipped-stat-start { - -webkit-clip-path: url(#path-stat-start); - clip-path: url(#path-stat-start); - } - - .clipped-stat-end { - -webkit-clip-path: url(#path-stat-end); - clip-path: url(#path-stat-end); - } - - .clipped-stories-contact { - -webkit-clip-path: url(#path-stories-contact); - clip-path: url(#path-stories-contact); - } - - .clipped-stories-impact { - -webkit-clip-path: url(#path-stories-impact); - clip-path: url(#path-stories-impact); - } - - .clipped-home-stat-1 { - -webkit-clip-path: url(#path-home-stat-1); - clip-path: url(#path-home-stat-1); - } - - .clipped-home-stat-2 { - -webkit-clip-path: url(#path-home-stat-2); - clip-path: url(#path-home-stat-2); - } - - .clipped-home-stat-3 { - -webkit-clip-path: url(#path-home-stat-3); - clip-path: url(#path-home-stat-3); + font-size: var(--text-xxxl); } figure.quote blockquote { - font-size: calc(24rem / 16); - } - - small, - .small { - font-size: calc(12rem / 16) !important; - } - - .stories-map { - height: 150px; - } - - .impact { - z-index: 1025; - position: absolute; - left: 0; - } - - .monterey-and-contact, - .absolute-footer { - position: relative; - top: 620px; /* Height of the absolutely-positioned Impact section */ - } - - .impact-stats-parent { - margin-left: -190px; - background: transparent url(/images/stories-bg-gradient.png) repeat-y right / contain; - padding: 60px 0; - } - - .stories-toc { - top: calc(var(--header-nav-height) + 1.5rem); + font-size: var(--text-xl); } } @media (max-width: 992px) { - .fs-0 { - font-size: calc(40rem / 16); - font-family: var(--calitp-headline-sans-serif); - } - - .navbar-brand { - --bs-navbar-brand-padding-x: 2rem; - --bs-navbar-brand-padding-y: 2rem; - } - - #mainNav { - position: absolute; - width: 100%; - left: 0; - top: var(--header-nav-height); - background: var(--bs-white); - } - - .navbar-nav .nav-link { - padding: 23.8px 0 23.8px 12px; - border-bottom: 1px solid var(--calitp-cyan-1); - } - - .navbar-nav { - margin: 0 auto; + .text-display { + font-size: var(--text-xxxl); } figure.quote blockquote { - font-size: calc(20rem / 16); + font-size: var(--text-l); } small, - .small { - font-size: calc(10rem / 16) !important; - } - - .stories-map { - width: 100%; - height: auto; - } - - .impact-stats { - margin: -80px auto 0 auto; + .small, + .text-caption { + font-size: var(--text-xxs) !important; } } @@ -612,14 +113,4 @@ footer a:hover { .mb-md-40 { margin-bottom: 40px; } - - .navbar-nav { - max-width: 720px; - } -} - -@media (min-width: 576px) and (max-width: 765px) { - .navbar-nav { - max-width: 540px; - } } diff --git a/src/stylesheets/nav-pills.css b/src/stylesheets/nav-pills.css new file mode 100644 index 000000000..fc87b6613 --- /dev/null +++ b/src/stylesheets/nav-pills.css @@ -0,0 +1,43 @@ +.nav-pills { + --bs-nav-pills-border-radius: 19px; +} + +.nav-pills .nav-link { + padding: 4px 8px; + border-width: 2px; + border-style: solid; +} + +.black-on-white .nav-pills { + --bs-nav-pills-link-active-color: white; + --bs-nav-pills-link-active-bg: var(--dsdl-body-color); +} + +.black-on-white .nav-pills .nav-link { + border-color: var(--dsdl-body-color); +} + +.black-on-white .nav-pills .nav-link:not(.active) { + color: var(--dsdl-body-color); +} + +.black-on-white .nav-pills .nav-link:hover { + border-color: rgb(38 38 38 / 0.8); /* dsdl-gray-80 at 80% opacity */ +} + +.white-on-color .nav-pills { + --bs-nav-pills-link-active-color: var(--dsdl-body-color); + --bs-nav-pills-link-active-bg: white; +} + +.white-on-color .nav-pills .nav-link { + border-color: white; +} + +.white-on-color .nav-pills .nav-link:not(.active) { + color: white; +} + +.white-on-color .nav-pills .nav-link:hover { + border-color: rgb(255 255 255 / 0.8); +} diff --git a/src/stylesheets/navbar.css b/src/stylesheets/navbar.css new file mode 100644 index 000000000..96ff0e6bf --- /dev/null +++ b/src/stylesheets/navbar.css @@ -0,0 +1,94 @@ +.navbar { + --bs-navbar-padding-y: 0; + box-shadow: 0px 4px 4px rgb(0 0 0 / 0.04); +} + +.navbar-nav { + --bs-nav-link-color: var(--dsdl-body-color); + --bs-navbar-active-color: var(--calitp-brand-blue); + --bs-nav-link-hover-color: var(--calitp-brand-blue); +} + +header .nav-link { + padding: 2rem 0; +} + +header .nav-link[aria-current="page"] { + color: var(--calitp-brand-blue); + background-color: var(--calitp-background-blue); +} + +header .nav-link:hover { + background-color: var(--calitp-background-blue); +} + +main.container { + padding-top: var(--header-nav-height); +} + +[id] { + scroll-margin-top: var(--header-nav-height); +} + +@media (min-width: 992px) { + .navbar { + --bs-navbar-nav-link-padding-x: 40px; + --bs-navbar-nav-link-padding-y: 0; + } + + .navbar-brand { + --bs-navbar-brand-padding-x: 2rem; + --bs-navbar-brand-padding-y: 2rem; + } + + .navbar-nav { + --bs-nav-link-color: var(--dsdl-body-color); + --bs-navbar-nav-link-padding-y: 0; + --bs-nav-link-padding-y: 0; + gap: 2rem; + } + + main.container { + min-height: calc(100vh - var(--footer-nav-height)); + } + + footer a { + line-height: var(--footer-nav-height); + } +} + +@media (max-width: 992px) { + .navbar-brand { + --bs-navbar-brand-padding-x: 2rem; + --bs-navbar-brand-padding-y: 2rem; + } + + #mainNav { + position: absolute; + width: 100%; + left: 0; + top: var(--header-nav-height); + background: white; + } + + .navbar-nav .nav-link { + padding: 23.8px 0 23.8px 12px; + border-bottom: 1px solid var(--dsdl-cyan-20); + } + + .navbar-nav { + margin: 0 auto; + } +} + +@media (min-width: 768px) { + .navbar-nav { + max-width: 720px; + } +} + +@media (min-width: 576px) and (max-width: 765px) { + .navbar-nav { + max-width: 540px; + } +} diff --git a/src/stylesheets/press-and-resources.css b/src/stylesheets/press-and-resources.css new file mode 100644 index 000000000..b6cf84c2d --- /dev/null +++ b/src/stylesheets/press-and-resources.css @@ -0,0 +1,25 @@ +.press-release h2, +.press-release h3 { + font-size: var(--bs-body-font-size); + padding-top: 20px; +} + +.press-release h2:last-of-type { + text-decoration: underline; +} + +.press-release img { + display: block; + max-width: 100%; +} + +.press-release figcaption p { + font-size: var(--text-s); + /* TODO: Revisit use of faux italics with Space Grotesk */ + font-style: italic; + text-align: center; +} + +.press-release sup a { + margin: 0 0.15em; +} diff --git a/src/stylesheets/print.css b/src/stylesheets/print.css new file mode 100644 index 000000000..12bd85f29 --- /dev/null +++ b/src/stylesheets/print.css @@ -0,0 +1,14 @@ +@media print { + main.container { + padding-top: 1rem !important; + } + + .col-lg-8 { + width: 100% !important; + } + + .press-release p, + .press-release a { + font-size: var(--text-s) !important; + } +} diff --git a/src/stylesheets/variables.css b/src/stylesheets/variables.css new file mode 100644 index 000000000..39ea652bc --- /dev/null +++ b/src/stylesheets/variables.css @@ -0,0 +1,16 @@ +:root { + /* Magic numbers for layout adjustments */ + --header-nav-height: 110px; + --footer-nav-height: 39px; + + /* Bootstrap border overrides */ + --bs-border-radius: 20px; + --bs-border-style: dashed; + + /* Colors */ + --calitp-background-blue: var(--dsdl-cyan-10); + --bs-primary: var(--calitp-brand-blue); + --bs-secondary-color: var(--dsdl-gray-80); + --bs-tertiary-color: var(--dsdl-slate-70); + --bs-nav-link-color: var(--dsdl-gray-90); +}