/* Start custom CSS for html, class: .elementor-element-5f284a1 *//* =========================================================
THINK CITY EDUCATION SOCIETY
BEYOND RUSH HOUR
CIVIC TRANSPORTATION EDITORIAL SYSTEM v1.0
ThinkCity Civic Insights Editorial System
Design character:
- premium civic magazine
- transportation / regional-access feature
- evidence-aware long-form reading
- generous editorial rhythm
- strong section differentiation
- premium FAQ + source registry
- TheGem-resistant component scope
- 18px mobile reading floor
========================================================= */
/* =========================================================
01. ROOT / TOKENS / FULL-WIDTH BREAKOUT
========================================================= */
.tc-civic-article {
--tca-ink: #101914;
--tca-ink-soft: #26362b;
--tca-copy: #3c4a40;
--tca-muted: #657269;
--tca-faint: #89938c;
--tca-green-1000: #0b2111;
--tca-green-975: #102816;
--tca-green-950: #16341d;
--tca-green-900: #214728;
--tca-green-850: #2d5832;
--tca-green-800: #37693b;
--tca-green-700: #4d7f3f;
--tca-green-600: #669a48;
--tca-green-500: #84b74f;
--tca-green-400: #a5cb76;
--tca-green-300: #bddb96;
--tca-green-200: #d8e9c8;
--tca-green-150: #e5efd9;
--tca-green-100: #edf5e6;
--tca-green-075: #f3f8ee;
--tca-green-050: #f7faf3;
--tca-paper: #fffefa;
--tca-white: #ffffff;
--tca-daylight: #fcfdf9;
--tca-blue-soft: #e9f3f5;
--tca-blue: #9dcbd1;
--tca-line:
rgba(36, 75, 42, 0.15);
--tca-line-soft:
rgba(36, 75, 42, 0.08);
--tca-line-strong:
rgba(36, 75, 42, 0.25);
--tca-shadow-xs:
0 4px 14px rgba(20, 38, 24, 0.04);
--tca-shadow-sm:
0 14px 34px rgba(20, 38, 24, 0.06),
0 4px 10px rgba(20, 38, 24, 0.025);
--tca-shadow-md:
0 28px 64px rgba(20, 38, 24, 0.09),
0 7px 18px rgba(20, 38, 24, 0.035);
--tca-shadow-lg:
0 48px 110px rgba(20, 38, 24, 0.14),
0 12px 28px rgba(20, 38, 24, 0.055);
--tca-radius-sm: 14px;
--tca-radius-md: 20px;
--tca-radius-lg: 30px;
--tca-radius-xl: 44px;
--tca-pill: 999px;
--tca-page: 1580px;
--tca-reading: 820px;
--tca-reading-wide: 1040px;
--tca-gutter:
clamp(28px, 5.2vw, 94px);
--tca-section:
clamp(108px, 9vw, 174px);
background:
var(--tca-white);
color:
var(--tca-copy);
font-family:
Inter,
"Helvetica Neue",
Helvetica,
Arial,
system-ui,
sans-serif;
font-size:
19px;
line-height:
1.78;
margin-left:
calc(50% - 50vw) !important;
margin-right:
calc(50% - 50vw) !important;
max-width:
none !important;
overflow-x:
clip;
position:
relative;
width:
100vw !important;
text-rendering:
optimizeLegibility;
-webkit-font-smoothing:
antialiased;
counter-reset:
tca-section;
}
.tc-civic-article,
.tc-civic-article *,
.tc-civic-article *::before,
.tc-civic-article *::after {
box-sizing:
border-box;
}
.tc-civic-article::selection,
.tc-civic-article *::selection {
background:
rgba(132, 183, 79, 0.28);
color:
var(--tca-green-1000);
}
/* =========================================================
02. THEGEM / WORDPRESS CONTAINMENT
========================================================= */
.tc-civic-article {
isolation:
isolate;
}
.tc-civic-article h1,
.tc-civic-article h2,
.tc-civic-article h3,
.tc-civic-article p,
.tc-civic-article ul,
.tc-civic-article ol,
.tc-civic-article figure {
transform:
none;
}
.tc-civic-article h1,
.tc-civic-article h2,
.tc-civic-article h3 {
background:
none !important;
color:
var(--tca-ink) !important;
-webkit-text-fill-color:
currentColor !important;
font-family:
Montserrat,
Inter,
"Helvetica Neue",
Arial,
sans-serif !important;
text-transform:
none;
text-wrap:
balance;
}
.tc-civic-article p {
color:
var(--tca-copy) !important;
-webkit-text-fill-color:
currentColor !important;
}
.tc-civic-article blockquote,
.tc-civic-article .blockquote,
.tc-civic-article .gem-quote {
background:
none !important;
border:
0 !important;
quotes:
none !important;
}
.tc-civic-article blockquote::before,
.tc-civic-article blockquote::after,
.tc-civic-article .blockquote::before,
.tc-civic-article .blockquote::after,
.tc-civic-article .gem-quote::before,
.tc-civic-article .gem-quote::after {
content:
none !important;
display:
none !important;
}
/* machine/schema support */
.tc-civic-article .tc-schema-support {
display:
none !important;
}
/* =========================================================
03. ACCESSIBILITY
========================================================= */
.tc-civic-article :focus-visible {
border-radius:
4px;
outline:
4px solid
rgba(132, 183, 79, 0.65);
outline-offset:
5px;
}
.tc-civic-article a {
text-decoration-thickness:
1.5px;
text-underline-offset:
0.16em;
}
/* =========================================================
04. HERO
========================================================= */
.tc-civic-article__hero {
background:
radial-gradient(
circle at 8% 7%,
rgba(132, 183, 79, 0.19),
transparent 26%
),
radial-gradient(
circle at 91% 82%,
rgba(157, 203, 209, 0.18),
transparent 30%
),
linear-gradient(
132deg,
#ffffff 0%,
#f8fbf5 47%,
#eaf3e2 100%
);
border-bottom:
1px solid
var(--tca-line);
overflow:
hidden;
padding:
clamp(74px, 6.5vw, 108px)
0
clamp(120px, 10vw, 184px);
position:
relative;
}
/* top authority line */
.tc-civic-article__hero::before {
background:
linear-gradient(
90deg,
var(--tca-green-950),
var(--tca-green-600) 42%,
var(--tca-green-300) 72%,
var(--tca-blue) 100%
);
content:
"";
height:
7px;
inset:
0 0 auto;
position:
absolute;
z-index:
3;
}
/* giant editorial word */
.tc-civic-article__hero::after {
color:
rgba(33, 71, 40, 0.026);
content:
"ACCESS";
font-family:
Montserrat,
Inter,
sans-serif;
font-size:
clamp(12rem, 23vw, 31rem);
font-weight:
900;
letter-spacing:
-0.115em;
line-height:
0.8;
pointer-events:
none;
position:
absolute;
right:
-3%;
top:
40%;
transform:
rotate(-4deg);
white-space:
nowrap;
}
.tc-civic-article__wrap {
margin-inline:
auto;
max-width:
var(--tca-page);
padding-inline:
var(--tca-gutter);
position:
relative;
width:
100%;
z-index:
2;
}
/* =========================================================
05. HERO META
========================================================= */
.tc-civic-article__meta {
border-bottom:
1px solid
var(--tca-line);
color:
var(--tca-green-850);
display:
flex;
flex-wrap:
wrap;
font-size:
13px;
font-weight:
820;
gap:
12px 27px;
letter-spacing:
0.1em;
margin-bottom:
clamp(84px, 7.5vw, 126px);
padding-bottom:
23px;
text-transform:
uppercase;
}
.tc-civic-article__meta
span:not(:last-child)::after {
color:
var(--tca-green-500);
content:
"•";
margin-left:
27px;
}
/* =========================================================
06. HERO CONTENT
========================================================= */
.tc-civic-article__hero-content {
max-width:
1260px;
}
.tc-civic-article__hero h1 {
color:
var(--tca-ink) !important;
font-size:
clamp(4.1rem, 6.25vw, 7.85rem);
font-weight:
790;
letter-spacing:
-0.061em;
line-height:
0.96;
margin:
0;
max-width:
13ch;
}
.tc-civic-article__deck {
border-left:
4px solid
var(--tca-green-500);
color:
var(--tca-ink-soft) !important;
font-size:
clamp(23px, 0.74vw + 19px, 31px) !important;
font-weight:
450;
letter-spacing:
-0.018em;
line-height:
1.6 !important;
margin:
clamp(54px, 5vw, 74px)
0
0 !important;
max-width:
62ch;
padding-left:
clamp(25px, 2.5vw, 39px);
text-wrap:
pretty;
}
/* =========================================================
07. ARTICLE BODY / SECTION FOUNDATION
========================================================= */
.tc-civic-article__body {
background:
#ffffff;
}
.tc-civic-article__section {
background:
var(--tca-white);
border-bottom:
1px solid
var(--tca-line-soft);
counter-increment:
tca-section;
padding:
var(--tca-section)
var(--tca-gutter);
position:
relative;
}
/* visual chapter number */
.tc-civic-article__section::before {
color:
var(--tca-green-600);
content:
counter(tca-section, decimal-leading-zero);
font-family:
Montserrat,
Inter,
sans-serif;
font-size:
13px;
font-weight:
850;
left:
max(
var(--tca-gutter),
calc(
(100vw - var(--tca-page)) / 2
+ var(--tca-gutter)
)
);
letter-spacing:
0.16em;
position:
absolute;
top:
clamp(48px, 4vw, 70px);
}
/* =========================================================
08. GOVERNED READING FIELD
========================================================= */
.tc-civic-article__reading {
margin-inline:
auto;
max-width:
var(--tca-reading);
position:
relative;
width:
100%;
}
.tc-civic-article__reading > p {
color:
var(--tca-copy) !important;
font-size:
clamp(19px, 0.18vw + 18px, 21px) !important;
letter-spacing:
-0.003em;
line-height:
1.82 !important;
margin:
0 0 1.6em !important;
max-width:
none;
text-wrap:
pretty;
}
.tc-civic-article__reading > p:last-child {
margin-bottom:
0 !important;
}
/* =========================================================
09. SECTION HEADINGS
========================================================= */
.tc-civic-article__section h2 {
color:
var(--tca-ink) !important;
font-size:
clamp(3rem, 4.6vw, 5.45rem);
font-weight:
770;
letter-spacing:
-0.049em;
line-height:
1.015;
margin:
0 0
clamp(46px, 4vw, 62px) !important;
max-width:
13ch;
}
/* subtle editorial rule */
.tc-civic-article__section h2::after {
background:
linear-gradient(
90deg,
var(--tca-green-500),
rgba(132, 183, 79, 0)
);
content:
"";
display:
block;
height:
2px;
margin-top:
35px;
width:
92px;
}
/* =========================================================
10. OPENING SECTION
========================================================= */
.tc-civic-article__opening {
background:
radial-gradient(
circle at 10% 8%,
rgba(132, 183, 79, 0.1),
transparent 26%
),
var(--tca-white);
}
.tc-civic-article__opening
.tc-civic-article__reading {
max-width:
900px;
}
.tc-civic-article__opening
.tc-civic-article__reading >
p:first-child {
color:
var(--tca-ink-soft) !important;
font-size:
clamp(23px, 0.52vw + 20px, 27px) !important;
line-height:
1.7 !important;
}
.tc-civic-article__opening
.tc-civic-article__reading >
p:first-child::first-letter {
color:
var(--tca-green-800);
float:
left;
font-family:
Montserrat,
Inter,
sans-serif;
font-size:
5.3em;
font-weight:
800;
line-height:
0.77;
margin:
0.06em 0.1em 0 0;
padding-top:
0.02em;
}
/* =========================================================
11. EVIDENCE-AWARE CLAIM MARKERS
========================================================= */
.tc-civic-article__reading
p[data-scrollmeta-claim-status="supported"],
.tc-civic-article__reading
p[data-scrollmeta-claim-status="supportedEditorialSynthesis"] {
position:
relative;
}
@media (min-width: 1050px) {
.tc-civic-article__reading
p[data-scrollmeta-claim-status="supported"]::before,
.tc-civic-article__reading
p[data-scrollmeta-claim-status="supportedEditorialSynthesis"]::before {
background:
var(--tca-green-500);
border-radius:
50%;
box-shadow:
0 0 0 6px
rgba(132, 183, 79, 0.1);
content:
"";
height:
7px;
left:
-37px;
position:
absolute;
top:
0.74em;
width:
7px;
}
}
/* =========================================================
12. ALTERNATING EDITORIAL CHAPTERS
========================================================= */
.tc-civic-article__section[
data-scrollmeta-section="campus-access"
] {
background:
radial-gradient(
circle at 92% 9%,
rgba(132, 183, 79, 0.12),
transparent 28%
),
linear-gradient(
145deg,
var(--tca-green-050),
#ffffff
);
}
.tc-civic-article__section[
data-scrollmeta-section="complete-communities"
] {
background:
radial-gradient(
circle at 7% 85%,
rgba(157, 203, 209, 0.14),
transparent 30%
),
linear-gradient(
138deg,
#f0f7eb,
#fbfdf8
);
}
.tc-civic-article__section[
data-scrollmeta-section="data-and-lived-experience"
] {
background:
radial-gradient(
circle at 90% 9%,
rgba(132, 183, 79, 0.1),
transparent 30%
),
#ffffff;
}
/* =========================================================
13. LATE-NIGHT CHAPTER
========================================================= */
.tc-civic-article__section[
data-scrollmeta-section="late-night-access"
] {
background:
radial-gradient(
circle at 88% 11%,
rgba(157, 203, 209, 0.16),
transparent 28%
),
radial-gradient(
circle at 9% 85%,
rgba(132, 183, 79, 0.12),
transparent 35%
),
linear-gradient(
145deg,
var(--tca-green-1000),
var(--tca-green-950) 52%,
#203f29
);
border-bottom:
0;
color:
#ffffff;
overflow:
hidden;
}
.tc-civic-article__section[
data-scrollmeta-section="late-night-access"
]::after {
color:
rgba(255, 255, 255, 0.026);
content:
"NIGHT";
font-family:
Montserrat,
Inter,
sans-serif;
font-size:
clamp(10rem, 22vw, 26rem);
font-weight:
900;
letter-spacing:
-0.11em;
pointer-events:
none;
position:
absolute;
right:
-2%;
top:
22%;
transform:
rotate(-5deg);
}
.tc-civic-article__section[
data-scrollmeta-section="late-night-access"
]::before {
color:
var(--tca-green-300);
z-index:
2;
}
.tc-civic-article__section[
data-scrollmeta-section="late-night-access"
]
.tc-civic-article__reading {
position:
relative;
z-index:
2;
}
.tc-civic-article__section[
data-scrollmeta-section="late-night-access"
] h2 {
color:
#ffffff !important;
-webkit-text-fill-color:
#ffffff !important;
}
.tc-civic-article__section[
data-scrollmeta-section="late-night-access"
] h2::after {
background:
linear-gradient(
90deg,
var(--tca-green-400),
rgba(165, 203, 118, 0)
);
}
.tc-civic-article__section[
data-scrollmeta-section="late-night-access"
] p {
color:
rgba(255, 255, 255, 0.88) !important;
-webkit-text-fill-color:
rgba(255, 255, 255, 0.88) !important;
}
.tc-civic-article__section[
data-scrollmeta-section="late-night-access"
]
p[data-scrollmeta-claim-status="supported"]::before {
background:
var(--tca-green-300);
box-shadow:
0 0 0 6px
rgba(189, 219, 150, 0.12);
}
/* =========================================================
14. CONFERENCE CONNECTION
========================================================= */
.tc-civic-article__conference {
background:
radial-gradient(
circle at 90% 10%,
rgba(132, 183, 79, 0.16),
transparent 30%
),
linear-gradient(
140deg,
#edf6e7,
#ffffff
);
border-bottom:
1px solid
var(--tca-line);
}
.tc-civic-article__conference
.tc-civic-article__reading {
background:
rgba(255, 255, 255, 0.75);
border:
1px solid
var(--tca-line);
border-radius:
clamp(26px, 3vw, 38px);
box-shadow:
var(--tca-shadow-md);
max-width:
940px;
padding:
clamp(44px, 5vw, 70px);
}
.tc-civic-article__conference h2 {
max-width:
11ch;
}
.tc-civic-article__conference
a {
color:
var(--tca-green-800) !important;
overflow-wrap:
anywhere;
text-decoration:
underline;
}
.tc-civic-article__conference
a:hover {
color:
var(--tca-green-950) !important;
}
/* =========================================================
15. CONCLUSION
========================================================= */
.tc-civic-article__conclusion {
background:
radial-gradient(
circle at 10% 10%,
rgba(132, 183, 79, 0.18),
transparent 30%
),
radial-gradient(
circle at 90% 88%,
rgba(157, 203, 209, 0.16),
transparent 30%
),
linear-gradient(
135deg,
#f2f8ed,
#ffffff
);
text-align:
center;
}
.tc-civic-article__conclusion
.tc-civic-article__reading {
max-width:
980px;
}
.tc-civic-article__conclusion h2 {
margin-inline:
auto !important;
max-width:
12ch;
}
.tc-civic-article__conclusion h2::after {
background:
linear-gradient(
90deg,
transparent,
var(--tca-green-500),
transparent
);
margin-inline:
auto;
width:
160px;
}
.tc-civic-article__conclusion p {
margin-left:
auto !important;
margin-right:
auto !important;
max-width:
72ch !important;
}
.tc-civic-article__conclusion
p:last-child {
color:
var(--tca-green-950) !important;
font-family:
Montserrat,
Inter,
sans-serif;
font-size:
clamp(1.7rem, 2vw, 2.35rem) !important;
font-weight:
720;
letter-spacing:
-0.03em;
line-height:
1.35 !important;
margin-top:
46px !important;
max-width:
26ch !important;
}
/* =========================================================
16. FAQ
========================================================= */
.tc-civic-article__faq {
background:
radial-gradient(
circle at 92% 6%,
rgba(132, 183, 79, 0.12),
transparent 29%
),
linear-gradient(
145deg,
var(--tca-green-050),
#ffffff
);
}
.tc-civic-article__faq
.tc-civic-article__reading {
max-width:
1080px;
counter-reset:
tca-faq;
}
.tc-civic-article__faq h2 {
margin-bottom:
clamp(68px, 6vw, 92px) !important;
max-width:
12ch;
}
.tc-civic-article__faq-item {
background:
rgba(255, 255, 255, 0.88);
border:
1px solid
var(--tca-line);
border-radius:
24px;
box-shadow:
var(--tca-shadow-xs);
counter-increment:
tca-faq;
margin:
0 0 20px;
padding:
clamp(30px, 3vw, 43px)
clamp(28px, 3.5vw, 48px);
position:
relative;
transition:
border-color 200ms ease,
box-shadow 200ms ease,
transform 200ms ease;
}
.tc-civic-article__faq-item:hover {
border-color:
rgba(77, 127, 63, 0.3);
box-shadow:
var(--tca-shadow-sm);
transform:
translateY(-2px);
}
.tc-civic-article__faq-item::before {
color:
var(--tca-green-600);
content:
counter(tca-faq, decimal-leading-zero);
display:
block;
font-size:
12px;
font-weight:
850;
letter-spacing:
0.14em;
margin-bottom:
18px;
}
.tc-civic-article__faq-item h3 {
color:
var(--tca-ink) !important;
font-size:
clamp(1.35rem, 1.55vw, 1.7rem);
font-weight:
760;
letter-spacing:
-0.026em;
line-height:
1.28;
margin:
0 0 19px !important;
max-width:
34ch;
}
.tc-civic-article__faq-item p {
color:
var(--tca-muted) !important;
font-size:
18px !important;
line-height:
1.72 !important;
margin:
0 !important;
max-width:
68ch;
}
/* =========================================================
17. FURTHER READING / SOURCE REGISTRY
========================================================= */
.tc-civic-article__sources {
background:
#ffffff;
}
.tc-civic-article__sources
.tc-civic-article__reading {
display:
grid;
gap:
24px;
grid-template-columns:
repeat(2, minmax(0, 1fr));
max-width:
1180px;
counter-reset:
tca-source;
}
.tc-civic-article__sources
.tc-civic-article__reading >
h2,
.tc-civic-article__sources
.tc-civic-article__reading >
p {
grid-column:
1 / -1;
}
.tc-civic-article__sources
.tc-civic-article__reading >
p {
color:
var(--tca-muted) !important;
font-size:
20px !important;
line-height:
1.7 !important;
margin:
-22px 0
clamp(38px, 4vw, 58px) !important;
max-width:
760px;
}
.tc-civic-article__source {
background:
linear-gradient(
150deg,
#ffffff,
var(--tca-green-050)
);
border:
1px solid
var(--tca-line);
border-radius:
24px;
box-shadow:
var(--tca-shadow-xs);
counter-increment:
tca-source;
min-height:
300px;
padding:
clamp(31px, 3vw, 42px);
position:
relative;
transition:
border-color 200ms ease,
box-shadow 200ms ease,
transform 200ms ease;
}
.tc-civic-article__source:hover {
border-color:
rgba(77, 127, 63, 0.28);
box-shadow:
var(--tca-shadow-sm);
transform:
translateY(-3px);
}
.tc-civic-article__source::before {
color:
var(--tca-green-600);
content:
counter(tca-source, decimal-leading-zero);
display:
block;
font-size:
12px;
font-weight:
850;
letter-spacing:
0.15em;
margin-bottom:
32px;
}
.tc-civic-article__source h3 {
color:
var(--tca-ink) !important;
font-size:
clamp(1.25rem, 1.4vw, 1.55rem);
font-weight:
750;
letter-spacing:
-0.025em;
line-height:
1.3;
margin:
0 0 18px !important;
max-width:
28ch;
}
.tc-civic-article__source p {
color:
var(--tca-muted) !important;
font-size:
16px !important;
line-height:
1.65 !important;
margin:
0 0 16px !important;
}
.tc-civic-article__source p:last-child {
margin-bottom:
0 !important;
}
.tc-civic-article__source a {
color:
var(--tca-green-800) !important;
font-size:
14px;
font-weight:
700;
overflow-wrap:
anywhere;
text-decoration:
underline;
}
.tc-civic-article__source a:hover {
color:
var(--tca-green-950) !important;
}
/* =========================================================
18. CONTINUE THE CONVERSATION / EVENT CLOSE
========================================================= */
.tc-civic-article__event-close {
background:
radial-gradient(
circle at 50% -20%,
rgba(165, 203, 118, 0.3),
transparent 44%
),
linear-gradient(
145deg,
var(--tca-green-1000),
var(--tca-green-950) 50%,
var(--tca-green-850)
);
border-bottom:
0;
color:
#ffffff;
text-align:
center;
}
.tc-civic-article__event-close::before {
color:
var(--tca-green-300);
}
.tc-civic-article__event-close
.tc-civic-article__reading {
max-width:
920px;
}
.tc-civic-article__event-close h2 {
color:
#ffffff !important;
-webkit-text-fill-color:
#ffffff !important;
font-size:
clamp(3.4rem, 5.3vw, 6.1rem);
margin-inline:
auto !important;
max-width:
10ch;
}
.tc-civic-article__event-close h2::after {
background:
linear-gradient(
90deg,
transparent,
var(--tca-green-400),
transparent
);
margin-inline:
auto;
width:
160px;
}
.tc-civic-article__event-close p {
color:
rgba(255, 255, 255, 0.88) !important;
-webkit-text-fill-color:
rgba(255, 255, 255, 0.88) !important;
font-size:
19px !important;
line-height:
1.6 !important;
margin:
0 auto 11px !important;
max-width:
690px;
}
.tc-civic-article__event-close
p:nth-of-type(1) {
color:
#ffffff !important;
-webkit-text-fill-color:
#ffffff !important;
font-family:
Montserrat,
Inter,
sans-serif;
font-size:
clamp(1.75rem, 2.2vw, 2.6rem) !important;
font-weight:
740;
letter-spacing:
-0.033em;
line-height:
1.2 !important;
margin-bottom:
29px !important;
}
.tc-civic-article__event-close
p:last-child {
border-top:
1px solid
rgba(255, 255, 255, 0.17);
margin-top:
34px !important;
padding-top:
35px;
}
.tc-civic-article__event-close a {
color:
var(--tca-green-200) !important;
-webkit-text-fill-color:
var(--tca-green-200) !important;
font-weight:
760;
overflow-wrap:
anywhere;
text-decoration:
underline;
}
.tc-civic-article__event-close a:hover {
color:
#ffffff !important;
-webkit-text-fill-color:
#ffffff !important;
}
/* =========================================================
19. LINKS INSIDE ARTICLE BODY
========================================================= */
.tc-civic-article__section:not(
[data-scrollmeta-section="late-night-access"]
):not(.tc-civic-article__event-close)
a {
color:
var(--tca-green-800) !important;
-webkit-text-fill-color:
var(--tca-green-800) !important;
}
.tc-civic-article__section:not(
[data-scrollmeta-section="late-night-access"]
):not(.tc-civic-article__event-close)
a:hover {
color:
var(--tca-green-950) !important;
-webkit-text-fill-color:
var(--tca-green-950) !important;
}
/* =========================================================
20. DESKTOP READING ENHANCEMENT
========================================================= */
@media (min-width: 1200px) {
/*
* Keeps the reading field intentionally narrow
* while allowing headings to breathe beyond it.
*/
.tc-civic-article__section:not(
.tc-civic-article__faq
):not(
.tc-civic-article__sources
):not(
.tc-civic-article__conference
):not(
.tc-civic-article__event-close
)
.tc-civic-article__reading h2 {
margin-left:
-70px !important;
max-width:
14ch;
}
}
/* =========================================================
21. TABLET
========================================================= */
@media (max-width: 1100px) {
.tc-civic-article {
--tca-reading:
780px;
--tca-gutter:
clamp(26px, 5vw, 58px);
}
.tc-civic-article__hero h1 {
font-size:
clamp(3.7rem, 8vw, 6rem);
max-width:
14ch;
}
.tc-civic-article__sources
.tc-civic-article__reading {
grid-template-columns:
1fr;
}
.tc-civic-article__source {
min-height:
0;
}
}
/* =========================================================
22. MOBILE
========================================================= */
@media (max-width: 767px) {
.tc-civic-article {
--tca-gutter:
21px;
--tca-section:
91px;
font-size:
18px;
}
.tc-civic-article__hero {
padding:
61px 0
96px;
}
.tc-civic-article__hero::after {
font-size:
11rem;
right:
-10%;
top:
49%;
}
.tc-civic-article__meta {
align-items:
flex-start;
flex-direction:
column;
gap:
6px;
margin-bottom:
56px;
}
.tc-civic-article__meta
span::after {
display:
none;
}
.tc-civic-article__hero h1 {
font-size:
clamp(2.95rem, 13.7vw, 4.35rem);
letter-spacing:
-0.049em;
line-height:
0.99;
max-width:
none;
}
.tc-civic-article__deck {
border-left-width:
3px;
font-size:
21px !important;
line-height:
1.58 !important;
margin-top:
43px !important;
padding-left:
20px;
}
.tc-civic-article__section {
padding-left:
var(--tca-gutter);
padding-right:
var(--tca-gutter);
}
.tc-civic-article__section::before {
left:
var(--tca-gutter);
top:
35px;
}
.tc-civic-article__section h2 {
font-size:
clamp(2.35rem, 10.7vw, 3.55rem);
letter-spacing:
-0.043em;
line-height:
1.04;
margin-bottom:
38px !important;
max-width:
none;
}
.tc-civic-article__section h2::after {
margin-top:
28px;
width:
70px;
}
.tc-civic-article__reading > p {
font-size:
18px !important;
line-height:
1.77 !important;
margin-bottom:
1.55em !important;
}
/* avoid over-large drop cap on small phones */
.tc-civic-article__opening
.tc-civic-article__reading >
p:first-child {
font-size:
20px !important;
}
.tc-civic-article__opening
.tc-civic-article__reading >
p:first-child::first-letter {
font-size:
4.4em;
}
.tc-civic-article__section[
data-scrollmeta-section="late-night-access"
]::after {
font-size:
10rem;
right:
-13%;
}
.tc-civic-article__conference
.tc-civic-article__reading {
border-radius:
22px;
padding:
34px 24px;
}
.tc-civic-article__faq
.tc-civic-article__reading {
max-width:
none;
}
.tc-civic-article__faq-item {
border-radius:
20px;
padding:
28px 23px;
}
.tc-civic-article__faq-item h3 {
font-size:
1.35rem;
}
.tc-civic-article__faq-item p {
font-size:
18px !important;
}
.tc-civic-article__sources
.tc-civic-article__reading {
display:
block;
}
.tc-civic-article__sources
.tc-civic-article__reading >
p {
font-size:
18px !important;
margin:
-15px 0 42px !important;
}
.tc-civic-article__source {
border-radius:
20px;
margin-bottom:
20px;
min-height:
0;
padding:
30px 24px;
}
.tc-civic-article__source h3 {
font-size:
1.3rem;
}
.tc-civic-article__source p {
font-size:
16px !important;
}
.tc-civic-article__event-close h2 {
font-size:
clamp(2.8rem, 12.5vw, 4.2rem);
max-width:
none;
}
.tc-civic-article__event-close p {
font-size:
18px !important;
}
}
/* =========================================================
23. SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.tc-civic-article {
--tca-gutter:
18px;
}
.tc-civic-article__hero h1 {
font-size:
2.82rem;
}
.tc-civic-article__deck {
font-size:
19px !important;
}
.tc-civic-article__section h2 {
font-size:
2.35rem;
}
}
/* =========================================================
24. HIGH CONTRAST
========================================================= */
@media (prefers-contrast: more) {
.tc-civic-article {
--tca-copy:
#263229;
--tca-muted:
#3e4c42;
--tca-line:
rgba(20, 52, 27, 0.32);
}
.tc-civic-article__faq-item,
.tc-civic-article__source,
.tc-civic-article__conference
.tc-civic-article__reading {
border-width:
2px;
}
}
/* =========================================================
25. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.tc-civic-article *,
.tc-civic-article *::before,
.tc-civic-article *::after {
animation:
none !important;
scroll-behavior:
auto !important;
transition:
none !important;
}
.tc-civic-article__faq-item:hover,
.tc-civic-article__source:hover {
transform:
none !important;
}
}
/* =========================================================
26. PRINT
========================================================= */
@media print {
.tc-civic-article {
--tca-copy:
#222;
background:
#fff !important;
color:
#222 !important;
font-size:
11pt;
margin:
0 !important;
width:
auto !important;
}
.tc-civic-article__hero,
.tc-civic-article__section,
.tc-civic-article__conference,
.tc-civic-article__faq,
.tc-civic-article__sources,
.tc-civic-article__event-close {
background:
#fff !important;
color:
#222 !important;
padding:
28pt 0 !important;
}
.tc-civic-article__hero::before,
.tc-civic-article__hero::after,
.tc-civic-article__section::before,
.tc-civic-article__section::after {
display:
none !important;
}
.tc-civic-article__wrap,
.tc-civic-article__reading {
max-width:
none !important;
padding:
0 !important;
width:
100% !important;
}
.tc-civic-article h1,
.tc-civic-article h2,
.tc-civic-article h3,
.tc-civic-article p,
.tc-civic-article a {
color:
#222 !important;
-webkit-text-fill-color:
#222 !important;
}
.tc-civic-article__sources
.tc-civic-article__reading {
display:
block;
}
.tc-civic-article__faq-item,
.tc-civic-article__source,
.tc-civic-article__conference
.tc-civic-article__reading {
border:
1px solid #bbb !important;
box-shadow:
none !important;
break-inside:
avoid;
margin-bottom:
16pt;
}
.tc-civic-article a {
overflow-wrap:
anywhere;
text-decoration:
underline !important;
}
}
/* =========================================================
THINK CITY
BEYOND RUSH HOUR
EDITORIAL PHOTOGRAPHY SYSTEM v1.0
Integrates:
- Vancouver SkyTrain hero
- UBC transit
- cycling / shorter-trip context
No visible article copy added.
========================================================= */
/* =========================================================
01. SHARED IMAGE FOUNDATION
========================================================= */
.tc-civic-article__feature-image,
.tc-civic-article__editorial-image {
margin:
0;
overflow:
hidden;
position:
relative;
}
.tc-civic-article__feature-image img,
.tc-civic-article__editorial-image img {
display:
block;
height:
100%;
object-fit:
cover;
width:
100%;
transition:
transform
650ms
cubic-bezier(
0.2,
0.7,
0.2,
1
);
}
/* =========================================================
02. HERO SKYTRAIN IMAGE
========================================================= */
.tc-civic-article__feature-image--hero {
border:
1px solid
var(--tca-line);
border-radius:
clamp(
28px,
3vw,
46px
);
box-shadow:
var(--tca-shadow-lg);
margin-top:
clamp(
75px,
7vw,
112px
);
min-height:
clamp(
470px,
39vw,
670px
);
position:
relative;
}
/* cinematic overlay */
.tc-civic-article__feature-image--hero::after {
background:
linear-gradient(
to top,
rgba(11, 33, 17, 0.27),
transparent 35%
),
linear-gradient(
90deg,
rgba(11, 33, 17, 0.08),
transparent 40%
);
content:
"";
inset:
0;
pointer-events:
none;
position:
absolute;
}
.tc-civic-article__feature-image--hero img {
object-position:
center 54%;
}
/* subtle editorial frame inside photo */
.tc-civic-article__feature-image--hero::before {
border:
1px solid
rgba(255, 255, 255, 0.28);
border-radius:
clamp(
21px,
2.5vw,
38px
);
content:
"";
inset:
clamp(
13px,
1.25vw,
20px
);
pointer-events:
none;
position:
absolute;
z-index:
2;
}
/* =========================================================
03. SECTION EDITORIAL IMAGES
========================================================= */
.tc-civic-article__editorial-image {
border:
1px solid
var(--tca-line);
border-radius:
clamp(
23px,
2.4vw,
34px
);
box-shadow:
var(--tca-shadow-md);
margin:
clamp(
54px,
5.5vw,
78px
)
0;
background:
var(--tca-green-050);
}
/*
* Break images beyond the normal 820px
* reading column on larger screens.
*/
@media (min-width: 1050px) {
.tc-civic-article__editorial-image {
margin-left:
-110px;
margin-right:
-110px;
width:
calc(100% + 220px);
}
}
/* =========================================================
04. UBC BUS IMAGE
========================================================= */
.tc-civic-article__editorial-image--wide {
aspect-ratio:
16 / 9;
}
.tc-civic-article__editorial-image--wide img {
object-position:
center 55%;
}
/* thin photographic accent line */
.tc-civic-article__editorial-image--wide::after {
background:
linear-gradient(
90deg,
var(--tca-green-800),
var(--tca-green-500),
var(--tca-blue)
);
bottom:
0;
content:
"";
height:
5px;
left:
0;
position:
absolute;
right:
0;
}
/* =========================================================
05. BIKE / SHORTER TRIP IMAGE
========================================================= */
.tc-civic-article__editorial-image--landscape {
aspect-ratio:
1.72 / 1;
}
.tc-civic-article__editorial-image--landscape img {
object-position:
center 60%;
}
/*
* Give this image a quieter, slightly more
* contemplative treatment than the UBC bus.
*/
.tc-civic-article__editorial-image--landscape::after {
background:
linear-gradient(
to top,
rgba(16, 40, 22, 0.14),
transparent 35%
);
content:
"";
inset:
0;
pointer-events:
none;
position:
absolute;
}
/* =========================================================
06. IMAGE HOVER
Very restrained. Photography should not
behave like a product card.
========================================================= */
@media (hover: hover) and (pointer: fine) {
.tc-civic-article__feature-image--hero:hover img,
.tc-civic-article__editorial-image:hover img {
transform:
scale(1.018);
}
}
/* =========================================================
07. HERO RHYTHM ADJUSTMENT
Hero becomes:
metadata
headline
deck
large photographic field
========================================================= */
.tc-civic-article__hero-content {
position:
relative;
z-index:
2;
}
.tc-civic-article__feature-image--hero {
position:
relative;
z-index:
2;
}
/*
* Once a feature image exists, give the bottom
* of the hero slightly less empty space.
*/
.tc-civic-article__hero {
padding-bottom:
clamp(
82px,
7vw,
120px
);
}
/* =========================================================
08. CAMPUS CHAPTER ADJUSTMENT
========================================================= */
.tc-civic-article__section[
data-scrollmeta-section="campus-access"
]
.tc-civic-article__editorial-image {
box-shadow:
0 35px 80px
rgba(20, 38, 24, 0.11);
}
/* =========================================================
09. COMPLETE COMMUNITIES IMAGE FIELD
========================================================= */
.tc-civic-article__section[
data-scrollmeta-section="complete-communities"
]
.tc-civic-article__editorial-image {
border-color:
rgba(36, 75, 42, 0.12);
box-shadow:
0 28px 66px
rgba(20, 38, 24, 0.08);
}
/* =========================================================
10. TABLET
========================================================= */
@media (max-width: 1100px) {
.tc-civic-article__feature-image--hero {
min-height:
450px;
}
.tc-civic-article__editorial-image {
margin-left:
0;
margin-right:
0;
width:
100%;
}
}
/* =========================================================
11. MOBILE
========================================================= */
@media (max-width: 767px) {
.tc-civic-article__feature-image--hero {
aspect-ratio:
4 / 3;
border-radius:
22px;
margin-top:
53px;
min-height:
0;
}
.tc-civic-article__feature-image--hero::before {
border-radius:
15px;
inset:
9px;
}
.tc-civic-article__feature-image--hero img {
object-position:
center;
}
.tc-civic-article__editorial-image {
border-radius:
20px;
margin:
42px 0;
}
.tc-civic-article__editorial-image--wide,
.tc-civic-article__editorial-image--landscape {
aspect-ratio:
4 / 3;
}
.tc-civic-article__editorial-image--wide img {
object-position:
center;
}
.tc-civic-article__editorial-image--landscape img {
object-position:
50% 58%;
}
}
/* =========================================================
12. SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.tc-civic-article__feature-image--hero {
aspect-ratio:
1 / 1;
}
.tc-civic-article__editorial-image--wide,
.tc-civic-article__editorial-image--landscape {
aspect-ratio:
1.15 / 1;
}
}
/* =========================================================
13. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.tc-civic-article__feature-image img,
.tc-civic-article__editorial-image img {
transition:
none !important;
}
.tc-civic-article__feature-image:hover img,
.tc-civic-article__editorial-image:hover img {
transform:
none !important;
}
}
/* =========================================================
14. PRINT
========================================================= */
@media print {
.tc-civic-article__feature-image,
.tc-civic-article__editorial-image {
border:
1px solid #aaa !important;
border-radius:
0 !important;
box-shadow:
none !important;
break-inside:
avoid;
margin:
24pt auto !important;
max-width:
100% !important;
width:
100% !important;
}
.tc-civic-article__feature-image::before,
.tc-civic-article__feature-image::after,
.tc-civic-article__editorial-image::after {
display:
none !important;
}
}/* End custom CSS */