From 949d4ec98f41a4325678ff51501add004c05cfab Mon Sep 17 00:00:00 2001 From: Scott Cranfill Date: Mon, 1 Dec 2025 22:30:37 +0000 Subject: [PATCH 01/10] feat(dsdl): Add DSDL design tokens, core type styles, and utilites --- src/stylesheets/core.css | 118 ++++++++++++++++++++++++++ src/stylesheets/dsdl.css | 7 ++ src/stylesheets/tokens.css | 152 ++++++++++++++++++++++++++++++++++ src/stylesheets/utilities.css | 22 +++++ 4 files changed, 299 insertions(+) create mode 100644 src/stylesheets/core.css create mode 100644 src/stylesheets/dsdl.css create mode 100644 src/stylesheets/tokens.css create mode 100644 src/stylesheets/utilities.css diff --git a/src/stylesheets/core.css b/src/stylesheets/core.css new file mode 100644 index 00000000..7210ab00 --- /dev/null +++ b/src/stylesheets/core.css @@ -0,0 +1,118 @@ +/* + * Cal-ITP Digital Services Design Language + * Core Styles + */ + + +body { + color: var(--calitp-gray-100); + font-family: var(--calitp-font-stack); + line-height: var(--line-height-normal); +} + +.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; +} + +.text-subtitle-s, +h6 { + font-size: var(--text-m); + line-height: var(--line-height-normal); + font-weight: 500; +} +.text-subtitle-m, +h4 { + font-size: var(--text-l); + line-height: var(--line-height-normal); + font-weight: 500; +} +.text-subtitle-l { + font-size: var(--text-xl); + line-height: var(--line-height-tight); + font-weight: 500; +} + +.text-title-s, +h5 { + font-size: var(--text-m); + line-height: var(--line-height-normal); + font-weight: 600; +} +.text-title-m, +h3 { + font-size: var(--text-xl); + line-height: var(--line-height-tight); + font-weight: 600; +} +.text-title-l { + font-size: var(--text-xxl); + line-height: var(--line-height-tight); + font-weight: 600; +} + +.text-headline-s { + font-size: var(--text-xl); + line-height: var(--line-height-tight); + font-weight: 700; +} +.text-headline-m, +h2 { + font-size: var(--text-xxl); + line-height: var(--line-height-tight); + font-weight: 700; +} +.text-headline-l, +h1 { + font-size: var(--text-xxxl); + line-height: var(--line-height-tight); + font-weight: 700; +} + +.text-display { + font-size: var(--text-display); + line-height: var(--line-height-extra-tight); + font-weight: 600; +} +.text-smallcaps { + font-size: var(--text-xs); + line-height: var(--line-height-loose); + font-weight: 400; + text-transform: uppercase; +} +.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(--monospace-font-stack); + font-size: var(--text-m); + line-height: var(--line-height-loose); + font-weight: 400; +} + +a:link, +a:visited { + color: var(--calitp-blue-70); +} +a:hover, +a:focus { + color: var(--calitp-blue-80); +} diff --git a/src/stylesheets/dsdl.css b/src/stylesheets/dsdl.css new file mode 100644 index 00000000..a3da8794 --- /dev/null +++ b/src/stylesheets/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/tokens.css b/src/stylesheets/tokens.css new file mode 100644 index 00000000..85fc3c24 --- /dev/null +++ b/src/stylesheets/tokens.css @@ -0,0 +1,152 @@ +/* + * 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=Space+Grotesk:wght@400..700&family=Source+Code+Pro&display=swap'); + +:root { + /* Fonts */ + --calitp-font-stack: 'Space Grotesk', system-ui; + --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 */ + +:root { + --calitp-brand-blue: var(--calitp-blue-70); /* #045b86 */ + --calitp-brand-cyan: var(--calitp-cyan-40); /* #38abd0 */ + --calitp-brand-yellow: var(--calitp-yellow-30); /* #febd28 */ + --calitp-red-10: #fef5f5; + --calitp-red-20: #fbd6d6; + --calitp-red-30: #f9b7b7; + --calitp-red-40: #f37a7b; + --calitp-red-50: #ee4142; + --calitp-red-60: #de0e10; + --calitp-red-70: #980a0b; + --calitp-red-80: #750809; + --calitp-red-90: #540506; + --calitp-red-100: #300304; + --calitp-orange-10: #fff4ef; + --calitp-orange-20: #fed6c4; + --calitp-orange-30: #fcb89a; + --calitp-orange-40: #fa7941; + --calitp-orange-50: #e54f0e; + --calitp-orange-60: #c3440c; + --calitp-orange-70: #852e08; + --calitp-orange-80: #662306; + --calitp-orange-90: #471804; + --calitp-orange-100: #260d02; + --calitp-yellow-10: #fff6de; + --calitp-yellow-20: #ffda84; + --calitp-yellow-30: #febd28; + --calitp-yellow-40: #ce9411; + --calitp-yellow-50: #a97a0e; + --calitp-yellow-60: #90680c; + --calitp-yellow-70: #614608; + --calitp-yellow-80: #4a3506; + --calitp-yellow-90: #332404; + --calitp-yellow-100: #1b1402; + --calitp-green-10: #f1f7f5; + --calitp-green-20: #cde3da; + --calitp-green-30: #abd0c0; + --calitp-green-40: #6bab90; + --calitp-green-50: #3b916c; + --calitp-green-60: #1b7e54; + --calitp-green-70: #105538; + --calitp-green-80: #0c412a; + --calitp-green-90: #092c1d; + --calitp-green-100: #05170f; + --calitp-cyan-10: #dff3fe; + --calitp-cyan-20: #bfe4f0; + --calitp-cyan-30: #91d1e5; + --calitp-cyan-40: #38abd0; + --calitp-cyan-50: #258cad; + --calitp-cyan-60: #207894; + --calitp-cyan-70: #155163; + --calitp-cyan-80: #103d4c; + --calitp-cyan-90: #0b2b34; + --calitp-cyan-100: #06161c; + --calitp-blue-10: #f2f8f9; + --calitp-blue-20: #cbe2e7; + --calitp-blue-30: #82b9c6; + --calitp-blue-40: #6ca7b8; + --calitp-blue-50: #488aa2; + --calitp-blue-60: #307693; + --calitp-blue-70: #045b86; + --calitp-blue-80: #044869; + --calitp-blue-90: #022a3d; + --calitp-blue-100: #011621; + --calitp-purple-10: #f7f7fa; + --calitp-purple-20: #deddea; + --calitp-purple-30: #c7c5db; + --calitp-purple-40: #9e9ac2; + --calitp-purple-50: #817caf; + --calitp-purple-60: #6d68a3; + --calitp-purple-70: #47418b; + --calitp-purple-80: #332d7e; + --calitp-purple-90: #211b61; + --calitp-purple-100: #120f33; + --calitp-indigo-10: #f7f7ff; + --calitp-indigo-20: #dddbff; + --calitp-indigo-30: #c4c1ff; + --calitp-indigo-40: #9792ff; + --calitp-indigo-50: #756fff; + --calitp-indigo-60: #645ddf; + --calitp-indigo-70: #433f96; + --calitp-indigo-80: #333072; + --calitp-indigo-90: #23214f; + --calitp-indigo-100: #13112a; + --calitp-pink-10: #fcf4f8; + --calitp-pink-20: #f3d7e5; + --calitp-pink-30: #ebb9d2; + --calitp-pink-40: #db83b0; + --calitp-pink-50: #ce5894; + --calitp-pink-60: #c4367e; + --calitp-pink-70: #901052; + --calitp-pink-80: #6f0c3f; + --calitp-pink-90: #4e082c; + --calitp-pink-100: #2c0519; + --calitp-gray-10: #f7f7f7; + --calitp-gray-20: #dedede; + --calitp-gray-30: #c7c7c7; + --calitp-gray-40: #9e9e9e; + --calitp-gray-50: #828282; + --calitp-gray-60: #6e6e6e; + --calitp-gray-70: #4a4a4a; + --calitp-gray-80: #383838; + --calitp-gray-90: #262626; + --calitp-gray-100: #141414; + --calitp-slate-10: #edf0f4; + --calitp-slate-20: #dadee1; + --calitp-slate-30: #c1c8cc; + --calitp-slate-40: #94a0a8; + --calitp-slate-50: #75848e; + --calitp-slate-60: #62717b; + --calitp-slate-70: #424c53; + --calitp-slate-80: #313a3e; + --calitp-slate-90: #22272b; + --calitp-slate-100: #121416; +} diff --git a/src/stylesheets/utilities.css b/src/stylesheets/utilities.css new file mode 100644 index 00000000..379b8934 --- /dev/null +++ b/src/stylesheets/utilities.css @@ -0,0 +1,22 @@ +/* + * 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; } From f30c70ae5a82b4fb680cd9857cf51f8957e2c01b Mon Sep 17 00:00:00 2001 From: Scott Cranfill Date: Mon, 1 Dec 2025 17:37:26 -0500 Subject: [PATCH 02/10] feat(dsdl): Add DSDL demo page --- src/_data/dsdl_colors.yml | 330 ++++++++++++++++++++++++++++++++++++++ src/dsdl.html | 317 ++++++++++++++++++++++++++++++++++++ src/stylesheets/main.css | 75 +++++++++ 3 files changed, 722 insertions(+) create mode 100644 src/_data/dsdl_colors.yml create mode 100644 src/dsdl.html diff --git a/src/_data/dsdl_colors.yml b/src/_data/dsdl_colors.yml new file mode 100644 index 00000000..d9a53a21 --- /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/dsdl.html b/src/dsdl.html new file mode 100644 index 00000000..b5895d34 --- /dev/null +++ b/src/dsdl.html @@ -0,0 +1,317 @@ +--- +title: DSDL demo +layout: default +--- + +{% 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 across display and body sizes. It has a sense of urbanity and trustworthiness, with strong, clean lines. It is used for all body and display text 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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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.
    +
    • +
  • +

    Smallcaps

    +
    +
    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/stylesheets/main.css b/src/stylesheets/main.css index 6fafc30f..68e2873d 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -623,3 +623,78 @@ footer a:hover { max-width: 540px; } } + + +/* DSDL demo page */ + +.dsdl-demo h1, +.dsdl-demo h2, +.dsdl-demo h3, +.dsdl-demo h4 { + font-family: var(--calitp-font-stack); +} + +.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(--calitp-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; +} From 94de5d32fdb783ff5d5d608b6435ca9a2061b176 Mon Sep 17 00:00:00 2001 From: Scott Cranfill Date: Tue, 2 Dec 2025 18:54:10 +0000 Subject: [PATCH 03/10] refactor(dsdl): Generate CSS color variables from YAML data --- src/stylesheets/tokens.css | 118 +++---------------------------------- 1 file changed, 8 insertions(+), 110 deletions(-) diff --git a/src/stylesheets/tokens.css b/src/stylesheets/tokens.css index 85fc3c24..9d8e8ac0 100644 --- a/src/stylesheets/tokens.css +++ b/src/stylesheets/tokens.css @@ -1,3 +1,7 @@ +--- +# Empty front matter to enable Liquid processing +--- + /* * Cal-ITP Digital Services Design Language * Design Tokens @@ -36,117 +40,11 @@ /* COLORS */ :root { + {% for color in site.data.dsdl_colors -%} + --calitp-{{ color.group }}-{{ color.level }}: {{ color.value }}; + {% endfor %} + --calitp-brand-blue: var(--calitp-blue-70); /* #045b86 */ --calitp-brand-cyan: var(--calitp-cyan-40); /* #38abd0 */ --calitp-brand-yellow: var(--calitp-yellow-30); /* #febd28 */ - --calitp-red-10: #fef5f5; - --calitp-red-20: #fbd6d6; - --calitp-red-30: #f9b7b7; - --calitp-red-40: #f37a7b; - --calitp-red-50: #ee4142; - --calitp-red-60: #de0e10; - --calitp-red-70: #980a0b; - --calitp-red-80: #750809; - --calitp-red-90: #540506; - --calitp-red-100: #300304; - --calitp-orange-10: #fff4ef; - --calitp-orange-20: #fed6c4; - --calitp-orange-30: #fcb89a; - --calitp-orange-40: #fa7941; - --calitp-orange-50: #e54f0e; - --calitp-orange-60: #c3440c; - --calitp-orange-70: #852e08; - --calitp-orange-80: #662306; - --calitp-orange-90: #471804; - --calitp-orange-100: #260d02; - --calitp-yellow-10: #fff6de; - --calitp-yellow-20: #ffda84; - --calitp-yellow-30: #febd28; - --calitp-yellow-40: #ce9411; - --calitp-yellow-50: #a97a0e; - --calitp-yellow-60: #90680c; - --calitp-yellow-70: #614608; - --calitp-yellow-80: #4a3506; - --calitp-yellow-90: #332404; - --calitp-yellow-100: #1b1402; - --calitp-green-10: #f1f7f5; - --calitp-green-20: #cde3da; - --calitp-green-30: #abd0c0; - --calitp-green-40: #6bab90; - --calitp-green-50: #3b916c; - --calitp-green-60: #1b7e54; - --calitp-green-70: #105538; - --calitp-green-80: #0c412a; - --calitp-green-90: #092c1d; - --calitp-green-100: #05170f; - --calitp-cyan-10: #dff3fe; - --calitp-cyan-20: #bfe4f0; - --calitp-cyan-30: #91d1e5; - --calitp-cyan-40: #38abd0; - --calitp-cyan-50: #258cad; - --calitp-cyan-60: #207894; - --calitp-cyan-70: #155163; - --calitp-cyan-80: #103d4c; - --calitp-cyan-90: #0b2b34; - --calitp-cyan-100: #06161c; - --calitp-blue-10: #f2f8f9; - --calitp-blue-20: #cbe2e7; - --calitp-blue-30: #82b9c6; - --calitp-blue-40: #6ca7b8; - --calitp-blue-50: #488aa2; - --calitp-blue-60: #307693; - --calitp-blue-70: #045b86; - --calitp-blue-80: #044869; - --calitp-blue-90: #022a3d; - --calitp-blue-100: #011621; - --calitp-purple-10: #f7f7fa; - --calitp-purple-20: #deddea; - --calitp-purple-30: #c7c5db; - --calitp-purple-40: #9e9ac2; - --calitp-purple-50: #817caf; - --calitp-purple-60: #6d68a3; - --calitp-purple-70: #47418b; - --calitp-purple-80: #332d7e; - --calitp-purple-90: #211b61; - --calitp-purple-100: #120f33; - --calitp-indigo-10: #f7f7ff; - --calitp-indigo-20: #dddbff; - --calitp-indigo-30: #c4c1ff; - --calitp-indigo-40: #9792ff; - --calitp-indigo-50: #756fff; - --calitp-indigo-60: #645ddf; - --calitp-indigo-70: #433f96; - --calitp-indigo-80: #333072; - --calitp-indigo-90: #23214f; - --calitp-indigo-100: #13112a; - --calitp-pink-10: #fcf4f8; - --calitp-pink-20: #f3d7e5; - --calitp-pink-30: #ebb9d2; - --calitp-pink-40: #db83b0; - --calitp-pink-50: #ce5894; - --calitp-pink-60: #c4367e; - --calitp-pink-70: #901052; - --calitp-pink-80: #6f0c3f; - --calitp-pink-90: #4e082c; - --calitp-pink-100: #2c0519; - --calitp-gray-10: #f7f7f7; - --calitp-gray-20: #dedede; - --calitp-gray-30: #c7c7c7; - --calitp-gray-40: #9e9e9e; - --calitp-gray-50: #828282; - --calitp-gray-60: #6e6e6e; - --calitp-gray-70: #4a4a4a; - --calitp-gray-80: #383838; - --calitp-gray-90: #262626; - --calitp-gray-100: #141414; - --calitp-slate-10: #edf0f4; - --calitp-slate-20: #dadee1; - --calitp-slate-30: #c1c8cc; - --calitp-slate-40: #94a0a8; - --calitp-slate-50: #75848e; - --calitp-slate-60: #62717b; - --calitp-slate-70: #424c53; - --calitp-slate-80: #313a3e; - --calitp-slate-90: #22272b; - --calitp-slate-100: #121416; } From 491f7051284f3760169e75660841f20d2e54d66b Mon Sep 17 00:00:00 2001 From: Scott Cranfill Date: Tue, 2 Dec 2025 20:42:48 +0000 Subject: [PATCH 04/10] chore(dsdl): Change variable prefix from calitp to dsdl Except for the three Cal-ITP brand color variables. --- src/stylesheets/core.css | 13 +++++++++---- src/stylesheets/main.css | 5 +++-- src/stylesheets/tokens.css | 12 ++++++------ 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/stylesheets/core.css b/src/stylesheets/core.css index 7210ab00..0f4b2bd2 100644 --- a/src/stylesheets/core.css +++ b/src/stylesheets/core.css @@ -5,8 +5,8 @@ body { - color: var(--calitp-gray-100); - font-family: var(--calitp-font-stack); + color: var(--dsdl-gray-100); + font-family: var(--dsdl-font-stack); line-height: var(--line-height-normal); } @@ -110,9 +110,14 @@ h1 { a:link, a:visited { - color: var(--calitp-blue-70); + color: var(--dsdl-blue-70); } a:hover, a:focus { - color: var(--calitp-blue-80); + color: var(--dsdl-blue-80); +} + +code, +pre { + font-family: var(--dsdl-monospace-font-stack); } diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css index 68e2873d..3826c9e9 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -631,7 +631,8 @@ footer a:hover { .dsdl-demo h2, .dsdl-demo h3, .dsdl-demo h4 { - font-family: var(--calitp-font-stack); + /* TODO: Remove when it's not necessary to override the styles above. */ + font-family: var(--dsdl-font-stack); } .dsdl-demo h2, @@ -674,7 +675,7 @@ footer a:hover { .dsdl-core-type-matrix th, .dsdl-core-type-matrix td { padding: 0.5rem; - border: 1px solid var(--calitp-gray-20); + border: 1px solid var(--dsdl-gray-20); } .dsdl-core-type-matrix th { background: var(--calitp-brand-blue); diff --git a/src/stylesheets/tokens.css b/src/stylesheets/tokens.css index 9d8e8ac0..900edf17 100644 --- a/src/stylesheets/tokens.css +++ b/src/stylesheets/tokens.css @@ -17,8 +17,8 @@ :root { /* Fonts */ - --calitp-font-stack: 'Space Grotesk', system-ui; - --monospace-font-stack: 'Source Code Pro', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace; + --dsdl-font-stack: 'Space Grotesk', 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); @@ -41,10 +41,10 @@ :root { {% for color in site.data.dsdl_colors -%} - --calitp-{{ color.group }}-{{ color.level }}: {{ color.value }}; + --dsdl-{{ color.group }}-{{ color.level }}: {{ color.value }}; {% endfor %} - --calitp-brand-blue: var(--calitp-blue-70); /* #045b86 */ - --calitp-brand-cyan: var(--calitp-cyan-40); /* #38abd0 */ - --calitp-brand-yellow: var(--calitp-yellow-30); /* #febd28 */ + --calitp-brand-blue: var(--dsdl-blue-70); /* #045b86 */ + --calitp-brand-cyan: var(--dsdl-cyan-40); /* #38abd0 */ + --calitp-brand-yellow: var(--dsdl-yellow-30); /* #febd28 */ } From 02faa510bee9706f2dc10d94f3ae712d518d5798 Mon Sep 17 00:00:00 2001 From: Scott Cranfill Date: Tue, 2 Dec 2025 22:52:46 +0000 Subject: [PATCH 05/10] refactor: Break CSS out into multiple files --- _config.yml | 2 + src/_includes/styles.html | 1 + src/customer-stories.html | 1 + src/dsdl.html | 1 + src/index.html | 1 + src/stylesheets/clipped-containers.css | 96 +++++ src/stylesheets/customer-stories.css | 51 +++ src/stylesheets/dsdl-demo.css | 74 ++++ src/stylesheets/footnotes.css | 41 ++ src/stylesheets/homepage.css | 47 +++ src/stylesheets/main.css | 532 +----------------------- src/stylesheets/nav-pills.css | 43 ++ src/stylesheets/navbar.css | 94 +++++ src/stylesheets/press-and-resources.css | 27 ++ src/stylesheets/print.css | 14 + src/stylesheets/variables.css | 40 ++ 16 files changed, 539 insertions(+), 526 deletions(-) create mode 100644 src/stylesheets/clipped-containers.css create mode 100644 src/stylesheets/customer-stories.css create mode 100644 src/stylesheets/dsdl-demo.css create mode 100644 src/stylesheets/footnotes.css create mode 100644 src/stylesheets/homepage.css create mode 100644 src/stylesheets/nav-pills.css create mode 100644 src/stylesheets/navbar.css create mode 100644 src/stylesheets/press-and-resources.css create mode 100644 src/stylesheets/print.css create mode 100644 src/stylesheets/variables.css diff --git a/_config.yml b/_config.yml index e696e1b9..9e260ce2 100644 --- a/_config.yml +++ b/_config.yml @@ -12,11 +12,13 @@ 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" diff --git a/src/_includes/styles.html b/src/_includes/styles.html index 2832e107..3bc5e361 100644 --- a/src/_includes/styles.html +++ b/src/_includes/styles.html @@ -10,3 +10,4 @@ integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" /> +{% if page.stylesheet %}{% endif %} diff --git a/src/customer-stories.html b/src/customer-stories.html index a4b073f9..f198e08a 100644 --- a/src/customer-stories.html +++ b/src/customer-stories.html @@ -2,6 +2,7 @@ layout: default permalink: /customer-stories title: Customer stories +stylesheet: customer-stories.css footer-class: absolute-footer --- diff --git a/src/dsdl.html b/src/dsdl.html index b5895d34..3b71f658 100644 --- a/src/dsdl.html +++ b/src/dsdl.html @@ -1,6 +1,7 @@ --- title: DSDL demo layout: default +stylesheet: dsdl-demo.css --- {% comment %} TODO: Remove when stylesheet is included sitewide. {% endcomment %} diff --git a/src/index.html b/src/index.html index 3c77a305..7a6d5071 100644 --- a/src/index.html +++ b/src/index.html @@ -1,6 +1,7 @@ --- title: Home layout: default +stylesheet: homepage.css ---
diff --git a/src/stylesheets/clipped-containers.css b/src/stylesheets/clipped-containers.css new file mode 100644 index 00000000..67678dae --- /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 00000000..6ffd7c8d --- /dev/null +++ b/src/stylesheets/customer-stories.css @@ -0,0 +1,51 @@ +.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; +} + +@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 00000000..63a0c72c --- /dev/null +++ b/src/stylesheets/dsdl-demo.css @@ -0,0 +1,74 @@ +/* DSDL demo page */ + +.dsdl-demo h1, +.dsdl-demo h2, +.dsdl-demo h3, +.dsdl-demo h4 { + /* TODO: Remove when it's not necessary to override the styles above. */ + font-family: var(--dsdl-font-stack); +} + +.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/footnotes.css b/src/stylesheets/footnotes.css new file mode 100644 index 00000000..be14312e --- /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: 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); + } +} diff --git a/src/stylesheets/homepage.css b/src/stylesheets/homepage.css new file mode 100644 index 00000000..e1f86d4b --- /dev/null +++ b/src/stylesheets/homepage.css @@ -0,0 +1,47 @@ +.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: 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); +} + +/* Initiatives */ + +.scroll-link { + scroll-margin-top: 240px; +} + +.tab-list .press-item:nth-child(n + 4), +.tab-list .resource:nth-child(n + 4) { + display: none; +} diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css index 3826c9e9..4142c741 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -1,58 +1,10 @@ -: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 '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); @@ -167,19 +119,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; @@ -191,232 +130,10 @@ figure.quote figcaption { 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%; -} - .mb-28 { margin-bottom: 28px; } @@ -431,100 +148,6 @@ footer a:hover { 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); - } - figure.quote blockquote { font-size: calc(24rem / 16); } @@ -533,32 +156,6 @@ footer a:hover { .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); - } } @media (max-width: 992px) { @@ -567,28 +164,6 @@ footer a:hover { 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; - } - figure.quote blockquote { font-size: calc(20rem / 16); } @@ -597,105 +172,10 @@ footer a:hover { .small { font-size: calc(10rem / 16) !important; } - - .stories-map { - width: 100%; - height: auto; - } - - .impact-stats { - margin: -80px auto 0 auto; - } } @media (min-width: 768px) { .mb-md-40 { margin-bottom: 40px; } - - .navbar-nav { - max-width: 720px; - } -} - -@media (min-width: 576px) and (max-width: 765px) { - .navbar-nav { - max-width: 540px; - } -} - - -/* DSDL demo page */ - -.dsdl-demo h1, -.dsdl-demo h2, -.dsdl-demo h3, -.dsdl-demo h4 { - /* TODO: Remove when it's not necessary to override the styles above. */ - font-family: var(--dsdl-font-stack); -} - -.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/nav-pills.css b/src/stylesheets/nav-pills.css new file mode 100644 index 00000000..d8844bcd --- /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: 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); +} diff --git a/src/stylesheets/navbar.css b/src/stylesheets/navbar.css new file mode 100644 index 00000000..d2b79274 --- /dev/null +++ b/src/stylesheets/navbar.css @@ -0,0 +1,94 @@ +.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); +} + +@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(--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); + } +} + +@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: 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; + } +} + +@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 00000000..ae821ffe --- /dev/null +++ b/src/stylesheets/press-and-resources.css @@ -0,0 +1,27 @@ +.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; +} diff --git a/src/stylesheets/print.css b/src/stylesheets/print.css new file mode 100644 index 00000000..347e5cd0 --- /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: 0.875rem !important; + } +} diff --git a/src/stylesheets/variables.css b/src/stylesheets/variables.css new file mode 100644 index 00000000..e32d68c4 --- /dev/null +++ b/src/stylesheets/variables.css @@ -0,0 +1,40 @@ +: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; +} From 64c8a461ec2ce82af7a61f3b9f82f31a02e72f83 Mon Sep 17 00:00:00 2001 From: Scott Cranfill Date: Wed, 3 Dec 2025 22:21:59 +0000 Subject: [PATCH 06/10] feat: Update all colors to use the DSDL --- src/_data/initiatives.yml | 6 ++--- src/_includes/home-stats.html | 6 ++--- src/_layouts/press.html | 3 +-- src/_layouts/resource.html | 3 +-- src/customer-stories.html | 16 ++++++------- src/partners.html | 14 +++++------ src/resources.html | 2 +- src/stylesheet.html | 4 ++-- src/stylesheets/core.css | 5 ++-- src/stylesheets/homepage.css | 8 +++---- src/stylesheets/main.css | 23 +++++++++--------- src/stylesheets/nav-pills.css | 10 ++++---- src/stylesheets/navbar.css | 16 ++++++------- src/stylesheets/tokens.css | 5 ++++ src/stylesheets/utilities.css | 4 ++++ src/stylesheets/variables.css | 44 +++++++++++------------------------ 16 files changed, 80 insertions(+), 89 deletions(-) diff --git a/src/_data/initiatives.yml b/src/_data/initiatives.yml index 7c0cfcc6..f93c9f68 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/home-stats.html b/src/_includes/home-stats.html index 6fc3234f..4d9425a7 100644 --- a/src/_includes/home-stats.html +++ b/src/_includes/home-stats.html @@ -22,7 +22,7 @@

Impact across California

-
+

68%

Increase in reduced-fare transactionsImpact across California Learn how Monterey-Salinas Transit made it simpler to access transit benefits.

-
+

229,988

Trips using a contactless credit/debit cardImpact across California Read how Glenn County is implementing contactless payments.

-
+

91%

Reduction of expired GTFS Schedule Feeds

- Press + Press

{{ page.heading }}

{% if page.lead %}

{{ page.lead }}

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

{{ page.title }}

{{ date }}

diff --git a/src/customer-stories.html b/src/customer-stories.html index f198e08a..d3f32535 100644 --- a/src/customer-stories.html +++ b/src/customer-stories.html @@ -9,7 +9,7 @@ {% include clipped-header.html %}
-
+

Our customers

@@ -110,14 +110,14 @@

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
    @@ -151,7 +151,7 @@

    Selected agency highlights

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

Contactless payments

Glenn County Transportation Division
    @@ -174,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 @@ -202,7 +202,7 @@

    Selected agency highlights

    -
    +

    Our impact

    Over the last 5 years, Cal-ITP has worked collaboratively with our customers to make progress toward the @@ -244,7 +244,7 @@

    Our impact

-

Benefits

Monterey-Salinas Transit
    @@ -283,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!” diff --git a/src/partners.html b/src/partners.html index 1ddb8fcf..ad033267 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,7 +83,7 @@

    California Department of Technology

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

California Department of Technology

 
-
+
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,14 +151,14 @@

California Air Resources Board

-
+
2035 By 2035, all new cars & light trucks sold in CA must be zero emission
 
-
+
89% of main industry players use contactless payment cards2 diff --git a/src/resources.html b/src/resources.html index ac16c620..c2112584 100644 --- a/src/resources.html +++ b/src/resources.html @@ -10,7 +10,7 @@ {% include clipped-header.html %}
-
+

Resources

diff --git a/src/stylesheet.html b/src/stylesheet.html index e991025b..74c52b36 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.” diff --git a/src/stylesheets/core.css b/src/stylesheets/core.css index 0f4b2bd2..c68cc388 100644 --- a/src/stylesheets/core.css +++ b/src/stylesheets/core.css @@ -5,7 +5,7 @@ body { - color: var(--dsdl-gray-100); + color: var(--dsdl-body-color); font-family: var(--dsdl-font-stack); line-height: var(--line-height-normal); } @@ -108,8 +108,7 @@ h1 { font-weight: 400; } -a:link, -a:visited { +a { color: var(--dsdl-blue-70); } a:hover, diff --git a/src/stylesheets/homepage.css b/src/stylesheets/homepage.css index e1f86d4b..657078f5 100644 --- a/src/stylesheets/homepage.css +++ b/src/stylesheets/homepage.css @@ -20,19 +20,19 @@ } .rainbow-list ol li:nth-child(1):before { - background: var(--calitp-primary-blue); + background: var(--calitp-brand-blue); } .rainbow-list ol li:nth-child(2):before { - background: var(--calitp-orange-5); + background: var(--dsdl-orange-80); } .rainbow-list ol li:nth-child(3):before { - background: var(--calitp-red-5); + background: var(--dsdl-red-80); } .rainbow-list ol li:nth-child(4):before { - background: var(--calitp-purple-4); + background: var(--dsdl-purple-70); } /* Initiatives */ diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css index 4142c741..98cec49b 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -1,3 +1,4 @@ +@import 'dsdl.css'; @import 'variables.css'; @import 'clipped-containers.css'; @import 'footnotes.css'; @@ -7,23 +8,23 @@ .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 { @@ -92,7 +93,7 @@ hr { 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); + background-color: rgba(38, 38, 38, 0.2); /* gray 80 at 20% opacity */ } .fs-7 { @@ -131,7 +132,7 @@ figure.quote figcaption { } footer a:hover { - color: var(--calitp-gray-2) !important; + color: var(--dsdl-gray-30) !important; } .mb-28 { diff --git a/src/stylesheets/nav-pills.css b/src/stylesheets/nav-pills.css index d8844bcd..b2bc5efa 100644 --- a/src/stylesheets/nav-pills.css +++ b/src/stylesheets/nav-pills.css @@ -10,23 +10,23 @@ .black-on-white .nav-pills { --bs-nav-pills-link-active-color: var(--bs-white); - --bs-nav-pills-link-active-bg: var(--bs-body-color); + --bs-nav-pills-link-active-bg: var(--dsdl-body-color); } .black-on-white .nav-pills .nav-link { - border-color: var(--bs-body-color); + border-color: var(--dsdl-body-color); } .black-on-white .nav-pills .nav-link:not(.active) { - color: var(--bs-body-color); + color: var(--dsdl-body-color); } .black-on-white .nav-pills .nav-link:hover { - border-color: rgba(33, 33, 33, 0.8); + border-color: rgba(38, 38, 38, 0.8); /* gray 80 at 80% opacity */ } .white-on-color .nav-pills { - --bs-nav-pills-link-active-color: var(--bs-body-color); + --bs-nav-pills-link-active-color: var(--dsdl-body-color); --bs-nav-pills-link-active-bg: var(--bs-white); } diff --git a/src/stylesheets/navbar.css b/src/stylesheets/navbar.css index d2b79274..9eca8f5e 100644 --- a/src/stylesheets/navbar.css +++ b/src/stylesheets/navbar.css @@ -4,9 +4,9 @@ } .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); + --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 { @@ -14,12 +14,12 @@ header .nav-link { } header .nav-link[aria-current="page"] { - color: var(--calitp-primary-blue); - background-color: var(--calitp-background-light-blue); + color: var(--calitp-brand-blue); + background-color: var(--calitp-background-blue); } header .nav-link:hover { - background-color: var(--calitp-background-light-blue); + background-color: var(--calitp-background-blue); } main.container { @@ -42,7 +42,7 @@ main.container { } .navbar-nav { - --bs-nav-link-color: var(--bs-body-color); + --bs-nav-link-color: var(--dsdl-body-color); --bs-navbar-nav-link-padding-y: 0; --bs-nav-link-padding-y: 0; gap: 2rem; @@ -73,7 +73,7 @@ main.container { .navbar-nav .nav-link { padding: 23.8px 0 23.8px 12px; - border-bottom: 1px solid var(--calitp-cyan-1); + border-bottom: 1px solid var(--dsdl-cyan-20); } .navbar-nav { diff --git a/src/stylesheets/tokens.css b/src/stylesheets/tokens.css index 900edf17..c07f0344 100644 --- a/src/stylesheets/tokens.css +++ b/src/stylesheets/tokens.css @@ -19,6 +19,7 @@ /* Fonts */ --dsdl-font-stack: 'Space Grotesk', 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); @@ -29,11 +30,15 @@ --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); } diff --git a/src/stylesheets/utilities.css b/src/stylesheets/utilities.css index 379b8934..e93b5bf6 100644 --- a/src/stylesheets/utilities.css +++ b/src/stylesheets/utilities.css @@ -12,11 +12,15 @@ .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); } diff --git a/src/stylesheets/variables.css b/src/stylesheets/variables.css index e32d68c4..88345065 100644 --- a/src/stylesheets/variables.css +++ b/src/stylesheets/variables.css @@ -1,40 +1,24 @@ :root { + /* Typography */ --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; + --calitp-font-weight-bold: 700; + + /* Magic numbers for layout adjustments */ --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; + /* 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-60); + --bs-nav-link-color: var(--dsdl-gray-90); } From 3025d1ea404b0b7eeb9856ba59118f5b1fe8b2d1 Mon Sep 17 00:00:00 2001 From: Scott Cranfill Date: Wed, 3 Dec 2025 22:34:44 +0000 Subject: [PATCH 07/10] chore: Move DSDL CSS into a subdirectory --- src/stylesheets/{ => dsdl}/core.css | 0 src/stylesheets/{ => dsdl}/dsdl.css | 0 src/stylesheets/{ => dsdl}/tokens.css | 0 src/stylesheets/{ => dsdl}/utilities.css | 0 src/stylesheets/main.css | 2 +- 5 files changed, 1 insertion(+), 1 deletion(-) rename src/stylesheets/{ => dsdl}/core.css (100%) rename src/stylesheets/{ => dsdl}/dsdl.css (100%) rename src/stylesheets/{ => dsdl}/tokens.css (100%) rename src/stylesheets/{ => dsdl}/utilities.css (100%) diff --git a/src/stylesheets/core.css b/src/stylesheets/dsdl/core.css similarity index 100% rename from src/stylesheets/core.css rename to src/stylesheets/dsdl/core.css diff --git a/src/stylesheets/dsdl.css b/src/stylesheets/dsdl/dsdl.css similarity index 100% rename from src/stylesheets/dsdl.css rename to src/stylesheets/dsdl/dsdl.css diff --git a/src/stylesheets/tokens.css b/src/stylesheets/dsdl/tokens.css similarity index 100% rename from src/stylesheets/tokens.css rename to src/stylesheets/dsdl/tokens.css diff --git a/src/stylesheets/utilities.css b/src/stylesheets/dsdl/utilities.css similarity index 100% rename from src/stylesheets/utilities.css rename to src/stylesheets/dsdl/utilities.css diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css index 98cec49b..09ea6739 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -1,4 +1,4 @@ -@import 'dsdl.css'; +@import 'dsdl/dsdl.css'; @import 'variables.css'; @import 'clipped-containers.css'; @import 'footnotes.css'; From 9ff8966f0804249e12f2220c44e31a79ac53e4f5 Mon Sep 17 00:00:00 2001 From: Scott Cranfill Date: Tue, 9 Dec 2025 18:32:48 +0000 Subject: [PATCH 08/10] feat(dsdl): Apply DSDL typography styles throughout the site Also includes a few minor color items I missed in the colors PR, primarily standardizing on the modern rgb(r g b / a) syntax, but also adjusting some that didn't look right on closer inspection while working on this PR (most notably, the rainbow list marker colors on the homepage). --- _config.yml | 1 - src/404.html | 6 +- src/_includes/article.html | 4 +- src/_includes/contact.html | 6 +- src/_includes/header.html | 2 +- src/_includes/home-stats.html | 24 +++---- src/_includes/initiatives.html | 6 +- src/_includes/styles.html | 1 - src/customer-stories.html | 72 +++++++++---------- src/dsdl.html | 4 +- src/index.html | 12 ++-- src/partners.html | 10 +-- src/press.html | 2 +- src/resources.html | 2 +- src/stylesheet.html | 8 +-- src/stylesheets/customer-stories.css | 5 +- src/stylesheets/dsdl/core.css | 37 ++++++---- src/stylesheets/footnotes.css | 8 +-- src/stylesheets/homepage.css | 16 ++++- src/stylesheets/main.css | 92 ++++--------------------- src/stylesheets/nav-pills.css | 12 ++-- src/stylesheets/navbar.css | 4 +- src/stylesheets/press-and-resources.css | 6 +- src/stylesheets/print.css | 2 +- src/stylesheets/variables.css | 10 +-- 25 files changed, 147 insertions(+), 205 deletions(-) diff --git a/_config.yml b/_config.yml index 9e260ce2..688e934a 100644 --- a/_config.yml +++ b/_config.yml @@ -21,7 +21,6 @@ defaults: 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 8b28fd85..2dab0b74 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/_includes/article.html b/src/_includes/article.html index 153abb42..f29d37d9 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 4c24e333..151b32ed 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 754cdaf4..fd08db14 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 4d9425a7..750d3e19 100644 --- a/src/_includes/home-stats.html +++ b/src/_includes/home-stats.html @@ -23,33 +23,33 @@

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 fe75eeab..cc0009fb 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 3bc5e361..ad69aa44 100644 --- a/src/_includes/styles.html +++ b/src/_includes/styles.html @@ -4,7 +4,6 @@ - -
+

Our customers

@@ -20,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
@@ -117,9 +117,9 @@

Selected agency highlights

— Public Transit Director in Ventura County
-

GTFS

- Ventura County Transportation Commission + Ventura County Transportation Commission
  • Fleet size: 41
  • Services operated: fixed-route, paratransit
    • @@ -151,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
-

Benefits

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

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

    @@ -328,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 index 3b71f658..a4f85e86 100644 --- a/src/dsdl.html +++ b/src/dsdl.html @@ -264,7 +264,7 @@

      Display

      Amazingly few discotheques provide jukeboxes.
    4. -

      Smallcaps

      +

      Small caps

      font-size
      12px
      @@ -275,7 +275,7 @@

      Smallcaps

      text-transform
      uppercase
      -
      Amazingly few discotheques provide jukeboxes.
      +
      Amazingly few discotheques provide jukeboxes.

    5. Caption

      diff --git a/src/index.html b/src/index.html index 7a6d5071..9291c751 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,7 @@ ---
      -
      +

      A modern and consistent transportation experience throughout California

      @@ -15,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 ad033267..6a9dc093 100644 --- a/src/partners.html +++ b/src/partners.html @@ -84,7 +84,7 @@

        California Department of Technology

        - 68% + 68% Increase in reduced-fare transactions1 @@ -93,7 +93,7 @@

        California Department of Technology

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

        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 5c2ab94b..a797a700 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 c2112584..1c7230df 100644 --- a/src/resources.html +++ b/src/resources.html @@ -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 74c52b36..2fa92d99 100644 --- a/src/stylesheet.html +++ b/src/stylesheet.html @@ -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/customer-stories.css b/src/stylesheets/customer-stories.css index 6ffd7c8d..b2155fa0 100644 --- a/src/stylesheets/customer-stories.css +++ b/src/stylesheets/customer-stories.css @@ -1,14 +1,15 @@ .link-tertiary { color: var(--bs-tertiary-color); + font-size: var(--text-s); + font-weight: 400; text-decoration: underline; - font-weight: normal; } .link-tertiary:hover, .link-tertiary.active { color: var(--bs-primary); - text-decoration: none; font-weight: 700; + text-decoration: none; } @media (min-width: 992px) { diff --git a/src/stylesheets/dsdl/core.css b/src/stylesheets/dsdl/core.css index c68cc388..292926ae 100644 --- a/src/stylesheets/dsdl/core.css +++ b/src/stylesheets/dsdl/core.css @@ -26,14 +26,16 @@ body { font-weight: 400; } -.text-subtitle-s, -h6 { +h6, +.h6, +.text-subtitle-s { font-size: var(--text-m); line-height: var(--line-height-normal); font-weight: 500; } -.text-subtitle-m, -h4 { +h4, +.h4, +.text-subtitle-m { font-size: var(--text-l); line-height: var(--line-height-normal); font-weight: 500; @@ -44,14 +46,16 @@ h4 { font-weight: 500; } -.text-title-s, -h5 { +h5, +.h5, +.text-title-s { font-size: var(--text-m); line-height: var(--line-height-normal); font-weight: 600; } -.text-title-m, -h3 { +h3, +.h3, +.text-title-m { font-size: var(--text-xl); line-height: var(--line-height-tight); font-weight: 600; @@ -67,14 +71,16 @@ h3 { line-height: var(--line-height-tight); font-weight: 700; } -.text-headline-m, -h2 { +h2, +.h2, +.text-headline-m { font-size: var(--text-xxl); line-height: var(--line-height-tight); font-weight: 700; } -.text-headline-l, -h1 { +h1, +.h1, +.text-headline-l { font-size: var(--text-xxxl); line-height: var(--line-height-tight); font-weight: 700; @@ -85,12 +91,17 @@ h1 { line-height: var(--line-height-extra-tight); font-weight: 600; } -.text-smallcaps { +.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); diff --git a/src/stylesheets/footnotes.css b/src/stylesheets/footnotes.css index be14312e..6881ff64 100644 --- a/src/stylesheets/footnotes.css +++ b/src/stylesheets/footnotes.css @@ -5,7 +5,7 @@ .footnotes ol::before { content: "Footnotes"; display: block; - font-weight: bold; + font-weight: 700; margin-bottom: 0.5rem; margin-left: -1rem; } @@ -17,7 +17,7 @@ .footnotes a, .footnotes li, .footnotes p { - font-size: 0.85rem; + font-size: var(--text-xs); } .footnotes li:target { @@ -32,10 +32,10 @@ @keyframes footnoteFade { 0% { - background-color: rgb(255 255 185 / 1); + background-color: var(--dsdl-yellow-20); } 100% { - background-color: rgb(255 255 185 / 0); + background-color: transparent; } } diff --git a/src/stylesheets/homepage.css b/src/stylesheets/homepage.css index 657078f5..678e367d 100644 --- a/src/stylesheets/homepage.css +++ b/src/stylesheets/homepage.css @@ -11,7 +11,7 @@ counter-increment: numList; content: counter(numList); text-align: center; - color: var(--bs-white); + color: white; line-height: 40px; width: 40px; height: 40px; @@ -24,11 +24,11 @@ } .rainbow-list ol li:nth-child(2):before { - background: var(--dsdl-orange-80); + background: var(--dsdl-orange-60); } .rainbow-list ol li:nth-child(3):before { - background: var(--dsdl-red-80); + background: var(--dsdl-red-70); } .rainbow-list ol li:nth-child(4):before { @@ -45,3 +45,13 @@ .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 09ea6739..ae33567a 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -35,81 +35,23 @@ --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(38, 38, 38, 0.2); /* gray 80 at 20% opacity */ -} - -.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; @@ -127,7 +69,8 @@ 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; } @@ -140,38 +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); + font-size: var(--text-xxxl); } figure.quote blockquote { - font-size: calc(24rem / 16); - } - - small, - .small { - font-size: calc(12rem / 16) !important; + font-size: var(--text-xl); } } @media (max-width: 992px) { - .fs-0 { - font-size: calc(40rem / 16); - font-family: var(--calitp-headline-sans-serif); + .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; + .small, + .text-caption { + font-size: var(--text-xxs) !important; } } diff --git a/src/stylesheets/nav-pills.css b/src/stylesheets/nav-pills.css index b2bc5efa..fc87b661 100644 --- a/src/stylesheets/nav-pills.css +++ b/src/stylesheets/nav-pills.css @@ -9,7 +9,7 @@ } .black-on-white .nav-pills { - --bs-nav-pills-link-active-color: var(--bs-white); + --bs-nav-pills-link-active-color: white; --bs-nav-pills-link-active-bg: var(--dsdl-body-color); } @@ -22,22 +22,22 @@ } .black-on-white .nav-pills .nav-link:hover { - border-color: rgba(38, 38, 38, 0.8); /* gray 80 at 80% opacity */ + 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: var(--bs-white); + --bs-nav-pills-link-active-bg: white; } .white-on-color .nav-pills .nav-link { - border-color: var(--bs-white); + border-color: white; } .white-on-color .nav-pills .nav-link:not(.active) { - color: var(--bs-white); + color: white; } .white-on-color .nav-pills .nav-link:hover { - border-color: rgba(var(--bs-white-rgb), 0.8); + border-color: rgb(255 255 255 / 0.8); } diff --git a/src/stylesheets/navbar.css b/src/stylesheets/navbar.css index 9eca8f5e..96ff0e6b 100644 --- a/src/stylesheets/navbar.css +++ b/src/stylesheets/navbar.css @@ -1,6 +1,6 @@ .navbar { --bs-navbar-padding-y: 0; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04); + box-shadow: 0px 4px 4px rgb(0 0 0 / 0.04); } .navbar-nav { @@ -68,7 +68,7 @@ main.container { width: 100%; left: 0; top: var(--header-nav-height); - background: var(--bs-white); + background: white; } .navbar-nav .nav-link { diff --git a/src/stylesheets/press-and-resources.css b/src/stylesheets/press-and-resources.css index ae821ffe..b6cf84c2 100644 --- a/src/stylesheets/press-and-resources.css +++ b/src/stylesheets/press-and-resources.css @@ -2,8 +2,6 @@ .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 { @@ -16,12 +14,12 @@ } .press-release figcaption p { - font-size: 0.875em; + font-size: var(--text-s); + /* TODO: Revisit use of faux italics with Space Grotesk */ font-style: italic; text-align: center; } .press-release sup a { - font-size: 1em; margin: 0 0.15em; } diff --git a/src/stylesheets/print.css b/src/stylesheets/print.css index 347e5cd0..12bd85f2 100644 --- a/src/stylesheets/print.css +++ b/src/stylesheets/print.css @@ -9,6 +9,6 @@ .press-release p, .press-release a { - font-size: 0.875rem !important; + font-size: var(--text-s) !important; } } diff --git a/src/stylesheets/variables.css b/src/stylesheets/variables.css index 88345065..39ea652b 100644 --- a/src/stylesheets/variables.css +++ b/src/stylesheets/variables.css @@ -1,12 +1,4 @@ :root { - /* Typography */ - --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-body-line-height: 1.4; - --calitp-font-weight-bold: 700; - /* Magic numbers for layout adjustments */ --header-nav-height: 110px; --footer-nav-height: 39px; @@ -19,6 +11,6 @@ --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-60); + --bs-tertiary-color: var(--dsdl-slate-70); --bs-nav-link-color: var(--dsdl-gray-90); } From b83551b234e11def83389316bf290f91f6a843cb Mon Sep 17 00:00:00 2001 From: Scott Cranfill Date: Tue, 9 Dec 2025 20:07:09 +0000 Subject: [PATCH 09/10] chore: Remove italics from example Christine already reviewed And replace `` usage with a proper heading. --- src/_press/cal-itp-first-net-cellular-plans.md | 16 ++++++++-------- ...valleycan-preloaded-reloadable-ev-charging.md | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/_press/cal-itp-first-net-cellular-plans.md b/src/_press/cal-itp-first-net-cellular-plans.md index 97780cb9..b6eca1ae 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 e7d67c03..acf48b48 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** From 67f4666668e06f3545e429fc36ab32364cd8de5c Mon Sep 17 00:00:00 2001 From: Scott Cranfill Date: Thu, 11 Dec 2025 20:51:08 +0000 Subject: [PATCH 10/10] feat(dsdl): Reintroduce separate heading and body font stacks --- src/dsdl.html | 12 ++++++++++-- src/stylesheets/dsdl-demo.css | 8 -------- src/stylesheets/dsdl/core.css | 28 ++++++++++++++++++++++++++-- src/stylesheets/dsdl/tokens.css | 5 +++-- src/stylesheets/dsdl/utilities.css | 4 ++++ 5 files changed, 43 insertions(+), 14 deletions(-) diff --git a/src/dsdl.html b/src/dsdl.html index a4f85e86..ef36e9fb 100644 --- a/src/dsdl.html +++ b/src/dsdl.html @@ -77,11 +77,19 @@

          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

          +

          - Space Grotesk is a proportional sans-serif typeface with modern feeling and strong readability across display and body sizes. It has a sense of urbanity and trustworthiness, with strong, clean lines. It is used for all body and display text on Cal-ITP websites. + 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 + See it on Google Fonts

          Source Code Pro

          diff --git a/src/stylesheets/dsdl-demo.css b/src/stylesheets/dsdl-demo.css index 63a0c72c..1ca623d6 100644 --- a/src/stylesheets/dsdl-demo.css +++ b/src/stylesheets/dsdl-demo.css @@ -1,13 +1,5 @@ /* DSDL demo page */ -.dsdl-demo h1, -.dsdl-demo h2, -.dsdl-demo h3, -.dsdl-demo h4 { - /* TODO: Remove when it's not necessary to override the styles above. */ - font-family: var(--dsdl-font-stack); -} - .dsdl-demo h2, .dsdl-demo h3, .dsdl-demo h4 { diff --git a/src/stylesheets/dsdl/core.css b/src/stylesheets/dsdl/core.css index 292926ae..d21c73af 100644 --- a/src/stylesheets/dsdl/core.css +++ b/src/stylesheets/dsdl/core.css @@ -6,10 +6,19 @@ body { color: var(--dsdl-body-color); - font-family: var(--dsdl-font-stack); + 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); @@ -29,6 +38,7 @@ body { 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; @@ -36,11 +46,13 @@ h6, 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; @@ -49,6 +61,7 @@ h4, 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; @@ -56,17 +69,20 @@ h5, 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; @@ -74,6 +90,7 @@ h3, 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; @@ -81,12 +98,14 @@ h2, 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; @@ -113,7 +132,7 @@ small, font-weight: 400; } .text-code { - font-family: var(--monospace-font-stack); + font-family: var(--dsdl-monospace-font-stack); font-size: var(--text-m); line-height: var(--line-height-loose); font-weight: 400; @@ -127,6 +146,11 @@ 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/tokens.css b/src/stylesheets/dsdl/tokens.css index c07f0344..a18482d2 100644 --- a/src/stylesheets/dsdl/tokens.css +++ b/src/stylesheets/dsdl/tokens.css @@ -13,11 +13,12 @@ /* Import webfonts */ /* Space Grotesk: Variable weight, 400–700 */ /* Source Code Pro: 400 only */ -@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&family=Source+Code+Pro&display=swap'); +@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-font-stack: 'Space Grotesk', system-ui; + --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 */ diff --git a/src/stylesheets/dsdl/utilities.css b/src/stylesheets/dsdl/utilities.css index e93b5bf6..5588af2e 100644 --- a/src/stylesheets/dsdl/utilities.css +++ b/src/stylesheets/dsdl/utilities.css @@ -24,3 +24,7 @@ .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); }
          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