index-soutien/assets/css/template/support/_section--video.scss
isUnknown 322d9136b6 PHP dynamique + cache JSON, nettoyage CSS/HTML, CI Forgejo
- Renommage classes/IDs (BEM cohérent, anglais, noms sémantiques)
- Correction HTML : h3→h2 FAQ, button>a→a[role=button] CTA mobile
- Conversion index.html → index.php (FR/EN) avec cache JSON depuis API Kirby
- Pages merci/thanks converties en PHP dynamique
- Ajout includes/cache.php + includes/config.php (cache TTL 5min)
- Ajout CI Forgejo (deploy FTP via lftp)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-12 08:00:58 +02:00

140 lines
No EOL
3 KiB
SCSS

#section__video{
margin-bottom: calc(var(--spacing)*2);
.btn-expand{
margin-top: calc(var(--spacing)*1);
--size: var(--h-block);
font-family: var(--font);
font-size: var(--fs-small);
font-weight: var(--fw-normal);
line-height: 1;
border: var(--border-light);
height: var(--size);
border-radius: calc(var(--size)/2);
padding-left: 1.5ch;
padding-right: 2ch;
padding-top: 1px;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
gap: 1ch;
// padding-right: 0.5ch;
font-weight: var(--fw-medium);
text-decoration: none;
&:hover{
background-color: var(--grey-800);
border-color: var(--color-txt);
}
cursor: pointer;
svg{
fill: var(--color-txt);
width: 10px;
position: relative;
top: 1px;
left: 1px;
}
}
.testimonies-list{
list-style: none;
width: 100%;
margin-top: calc(var(--spacing)*1);
display: none;
.testimony-item{
position: relative;
padding-left: 40px;
padding-right: 2ch;
// padding-top: calc(var(--spacing)*0.25);
// padding-bottom: calc(var(--spacing)*0.25);
// border-top: var(--border-light);
// border-bottom: var(--border-light);
margin-bottom: calc(var(--spacing)*0.75);
cursor: pointer;
@media screen and (max-width: 520px){
.desktop-break{ display: none; }
}
&:hover{
color: var(--grey-100);
}
.icon{
--size: 20px;
flex-shrink: 0;
width: var(--size);
height: var(--size);
border-radius: calc(var(--size)/2);
border: var(--border);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0px;
}
svg{
fill: var(--color-txt);
width: 7px;
}
}
}
#testimonies-toggle{ display: none }
#testimonies-toggle:checked ~ .testimonies-list{
display: block;
}
}
#video__fullscreen{
width: 100vw;
height: 100vh;
background-color: var(--color-bg);
padding: var(--padding-body);
position: fixed;
top: 0px;
left: 0;
z-index: 3000;
iframe{
width: 90%;
height: calc(100vh - 60px);
height: calc(100dvh - 60px);
border: var(--border);
}
#video__close{
height: 60px;
font-size: 20px;
width: 100%;
font-weight: bold;
display: flex;
align-items: top;
justify-content: flex-end;
}
}
body.is-fullscreen{
overflow: hidden;
}