:root{
--brand: #ef480b;
--bg-dark: #ef480b;
--text: #111;
--text-on-red: #fff;
--muted-on-red:#ffe3e3;
--outline-on-red: rgba(255,255,255,.35); --btn-radius: 40px;
--btn-pad-y: 0.5rem;
--btn-pad-x: 1rem;
--btn-font: 1.2rem; --rail: 2rem; --footer-bg: var(--brand);
--footer-text: #fff;
--footer-muted: #ffffff;
--footer-outline: rgba(255,255,255,.35);
--footer-button: #333;
--marquee-size: 24px;
--marquee-speed: 60s; --marquee-gap: 3rem; } html { box-sizing: border-box; 
scroll-behavior: smooth; 
font-size: 16px;
}
*, *::before, *::after { box-sizing: inherit; }
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
font-size: 1.3rem; line-height: 1.7;
color: var(--text);
}
section { padding: 1rem 0; } img{
width: 100%;
display: block;
border-radius: 8px;
object-fit: cover;
}
h1 { font-size: 4rem; color: var(--text-on-red); line-height: 1.25; }
h2 { font-size: 3rem; color: var(--brand); line-height: 1.25; }
figcaption{
margin-top: .5rem;
font-size: .95rem;
line-height: 1.5;
color:  var(--brand);
font-style: italic;
max-width: 70%;
}
.header figcaption {
color: #fff;
} ul, ol { padding-left: 1.25em; }
ul li, ol li { margin: .3em 0; } .btn, .wp-block-button__link{
display: inline-block;
padding: var(--btn-pad-y) var(--btn-pad-x);
border-radius: var(--btn-radius);
font-size: var(--btn-font);
border: 3px solid transparent;
cursor: pointer;
text-decoration: none;
transition: transform .15s ease, filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
max-width: fit-content; }
.btn:active{ transform: translateY(1px); } .btn--primary{
background: var(--brand);
color: #fff;
border-color: #fff;
}
.btn--primary:hover{
background: #fff;
color: var(--brand);
} .btn--primary2{
background: #fff;
color: var(--brand);
border-color: #fff;
}
.btn--primary2:hover{
background: var(--brand);
color: #fff;
} .btn--secondary, .wp-block-button__link{
background: var(--brand);
color: #fff;
border: 2px solid var(--brand);
border-radius: 40px;
font-size: 18px;
margin-bottom: 1rem;
}
.btn--secondary:hover, .wp-block-button__link:hover{
background: #fff;
color: var(--brand);
} .btn--lg{ font-size: 2rem; }  .image-wrapper-top{
background: var(--brand);
color: var(--text-on-red);
} .site-nav,
.image-wrapper-top .header,
.image-wrapper-top .quick-links{
padding-left: var(--rail);
padding-right: var(--rail);
}
.quick-links{
gap:1rem;
} .site-nav{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 2em;
}
.site-nav .brand a{
display: flex;
align-items: center;
gap: .5rem;
}
.site-nav .brand img{ height: 170px; max-height: 100px; width: auto; }
.site-nav .brand img:last-child{ height: 100px; }
.site-nav .links{
display: flex;
gap: 15px;
flex: 1 1 auto;
justify-content: flex-end;
}
.site-nav a{ text-decoration: none; color: var(--text-on-red); } .header-text h1{ line-height: 1.1; margin-top:0 !important; }
.header-image{
background: url(//tablerondequartierchinoismtl.org/wp-content/themes/TRQC/src/css/images/IMG_5095.jpg) center/cover no-repeat fixed;
height: 400px;
border-radius: 20px;
overflow: hidden;
transition: background-attachment .3s;
}
.header-image.scrolled{ background-attachment: scroll; } .quick-links{ display:flex; justify-content: space-around; padding: 3rem 0; width:100%; }
.quick{ display:flex; justify-content:space-between ; width:100%; } .image-wrapper{
background: #fff;
color: var(--brand);
margin: 1rem 2rem; padding: 0 var(--rail); padding-bottom: 0;
}
.image-wrapper h1,
.image-wrapper h2,
.image-wrapper h3,
.image-wrapper h4,
.image-wrapper figcaption{ color: var(--brand); z-index: 1; } .section-title{
display: block;
margin: 0 0 .75rem 0;
font-size: 1.5rem;
font-weight: 800;
color: var(--brand);
}
.section-title > a{
display: block;
font-size: 1.5rem;
font-weight: 800;
color: inherit;
text-decoration:none;
} .glow-dot{
position: relative;
display: inline-block; }
.glow-dot::after{
content:"";
position:absolute;
z-index: -1;
inset:-10px; border-radius:50%; background: transparent; box-shadow: 0 0 0 rgba(255, 85, 0, 0); transition: box-shadow .3s ease;
}
.glow-dot:hover::after{
box-shadow: 0 0 30px 7px rgba(240, 71, 10, 0.6);
} .events h2 {
margin: 0 !important;
padding-bottom: 2%;
}
.image-wrapper-collapsibles {
border: 3px solid var(--brand);
background: transparent;
color: var(--brand);
border-radius: 30px 30px 0 0;
}  .container {
border-bottom: 3px dotted var(--brand);
padding-left: 2rem; padding-right: 2rem;
}
.container:last-child { border-bottom: 3px solid var(--brand); } .container > .collapsible {
background: transparent;
margin-top: 0;
border: none;
width: 100%;
text-align: left;
font-size: 30px;
color: var(--brand);
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color .3s ease, box-shadow .3s ease;
padding: 0; }
.collapsible:after { content:"\002B"; font-size:50px; color: var(--brand); }
.collapsible-active:after { content:"\2212"; color: var(--brand); } .content {
display: none;
overflow: hidden;
background: transparent;
font-size: 1em;
padding-top: 1rem; }
.content > p,
.content > .btn { margin-left: 0; }
.event-details { margin-bottom: 1rem; }
.event-details p{
margin: 0;
line-height: 1.2; }
.event-details p:first-child{ font-weight: 700; } .other{ max-width: 100%; }
.news-body{
display: flex;
align-items: flex-start;
gap: 2rem;
}
.news-body > div:first-child{ flex: 1 1 40%; }
.news-body .text{
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0;
line-height: inherit;
flex: 1 1 60%;
min-width: 0; }
.news h2{
font-size: 2rem;
margin: 0 0 1rem 0;
}
.news-body > div:first-child img{
width: 100%;
height: auto;
display: block;
border-radius: 8px;
object-fit: cover;
} .inner-text{ padding-top: 1%; padding-bottom: 10%; }
.inner-text > p{
color: #000;
font-size: 1em;
text-align: left;
max-width: 70ch;
padding-top: .2rem;
line-height: inherit;
}
.resources-image {
max-width: 70ch; margin: 1rem 0;
}
.resources-image img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
.credits{ margin: 2rem 0; }
.credits p{
margin: 0;
line-height: 1.2;
} .partners{ padding: 1rem 0; }
.all-partners{
padding-top: 1rem;
padding-bottom: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1.5rem 2rem;
align-items: center;
justify-content: space-between;
}
.partner-logo{ display: inline-flex; align-items: center; }
.partner-logo img{
height: 100px;
width: auto;
display: block;
border-radius: 5px;
}
@media (max-width: 600px){
.partner-logo img{ height: 48px; }
} .lang-switch{ position: relative; display: inline-block; }
.lang-btn i{ margin-left: .5rem; }
.lang-menu{
position: absolute;
right: 0;
top: calc(100% + 6px);
list-style: none;
margin: 0;
padding: .4rem;
background: #fff;
color: var(--text);
border: 2px solid var(--brand);
border-radius: 12px;
min-width: 10rem;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
z-index: 1000;
min-width: 100%;
box-sizing: border-box;
display: none;
}
.lang-menu[data-open="true"]{ display: block; }
.lang-menu li{ margin: 0; }
.lang-menu a{
display: block;
padding: .5rem .75rem;
text-decoration: none;
color: var(--text);
border-radius: 8px;
}
.lang-menu a:hover,
.lang-menu a:focus{
background: var(--muted-on-red);
text-decoration: underline 2px solid var(--brand);
outline: none;
}
.lang-menu { display: none; }
.lang-menu.open { display: block; } .team h2{ margin: 0 0 1rem var(--rail); }
.team-list{
display: grid;
grid-template-columns: minmax(10ch, 260px) 1fr; row-gap: 0.75rem;
column-gap: 2rem;
margin: 0 var(--rail) 2.5rem;
}
.team-member{ display: contents; }
.team-member .name{
font-weight: 700; color: var(--text); line-height: 1.3; padding: .35rem 0;
border-bottom: 1px dotted rgba(0,0,0,.08);
}
.team-member .role{
color: var(--brand); font-weight: 500; line-height: 1.3; padding: .35rem 0; opacity: .95;
border-bottom: 1px dotted rgba(0,0,0,.08);
}
@media (max-width: 700px){
.team-list{ grid-template-columns: 1fr; }
.team-member .role{ margin-top: .1rem; border-bottom: none; }
} .site-footer {
background: var(--footer-bg);
color: var(--footer-text);
padding: 3rem 2rem 2rem;
} .site-footer h3 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
} .footer-top {
display: flex;
justify-content: space-between;
gap: 3rem;
flex-wrap: wrap;
max-width: 100%;
margin: 0 auto 2.5rem;
border-bottom: 3px solid var(--footer-text);
padding-bottom: 2rem;
align-items: baseline;
}
.footer-about,
.footer-menu,
.footer-newsletter { flex: 1 1 200px; }
.footer-about{ display: flex; flex-direction: column; align-items: flex-start; }
.footer-about p{ color: var(--footer-muted); line-height: 1.6; } .footer-menu ul{ list-style: none; padding: 0; margin: 0; }
.footer-menu li+li{ margin-top: .5rem; }
.footer-menu a{ color: var(--footer-text); text-decoration: none; }
.footer-menu a:hover{ text-decoration: underline; } .newsletter-form{ display: grid; gap: .8rem; }
.newsletter-form label{ display: grid; gap: .3rem; font-size: .95rem; }
.newsletter-form input{
background: #fff;
color: #111;
border: 3px solid var(--footer-outline);
border-radius: 30px;
padding: .7rem .9rem;
font-size: 1rem;
}
.checkbox{ display: flex !important; flex-direction: row; }
.subscribe{
background: var(--footer-button);
color: #fff;
border: none;
padding: .9rem 1.2rem;
border-radius: 30px;
cursor: pointer;
}
.subscribe:hover{ filter: brightness(1.1); } .footer-bottom{
max-width: 100%;
margin: 2rem auto 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
}
.contact a{ color: var(--footer-text); text-decoration: none; }
.contact a:hover{ text-decoration: underline; }
.footer-logos{ display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.footer-logos img{ height: 40px; width: auto; }
.social-links{ display: flex; gap: 1rem; }
.social-links a{
color: var(--footer-text);
font-size: 1.2rem;
text-decoration: none;
opacity: .9;
}
.social-links a:hover{ opacity: 1; }
.mobile-only{
display:none;
}
.tags{
display: flex;
align-items: center;
gap: .75rem;
}
section.tags{
padding: 0 0 1rem;
}
.tags-label{
margin: 0;
font-weight: 700;
color: var(--brand);
} .tag-btn {
display: inline-flex; align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem;
border-radius: var(--btn-radius);
font-size: 0.9rem;
border: 2px solid var(--brand);
cursor: pointer;
background: #fff;
color: var(--brand);
transition: background .2s ease, color .2s ease, transform .15s ease;
margin: 0.25rem;
text-decoration: none;
} .tag-btn.active {
background: var(--brand);
color: #fff;
} .tag-btn:hover {
transform: translateY(-1px);
filter: brightness(1.05);
}
.sideByside{
display:flex;
gap: 1em;
} .marquee{
overflow: hidden;
background: #fff;
color: var(--text);
border-top: 1px solid var(--outline-on-red);
border-bottom: 1px solid var(--outline-on-red);
}
.marquee__track{
display: inline-flex;
gap: var(--marquee-gap);
white-space: nowrap;
font-size: var(--marquee-size);
line-height: 1.1;
padding: .6rem 0; will-change: transform;
animation: marquee-ltr var(--marquee-speed) linear infinite;
}
.marquee__item{ flex: 0 0 auto; }
.marquee:hover .marquee__track{
animation-play-state: paused; } @keyframes marquee-ltr{
0%   { transform: translateX(-50%); }
100% { transform: translateX(0); }
} @media (prefers-reduced-motion: reduce){
.marquee__track{ animation: none; }
} @media (max-width: 600px){
:root{ --marquee-size: 28px; }
}