spacer (see .main-card-bottom, now unused/removed). Scoped to
.main-card-border rather than .main-card-inner because .main-card-inner
is shared with the DETAIL page view, which has no button bar. */
padding-bottom: 36px;
}
.main-card-img-box {
width:100%;
height:var(--sys-img-box-height);
display:block;
overflow: hidden;
}
.main-card-img-box img {
height:var(--sys-img-height);
border-style: none;
margin-top:6px;
margin-left:0px;
vertical-align: bottom;
}
.three-card {
flex-direction: column;
align-content:left;
text-align:left;
position: relative;
width: var(--width-three-card);
}
.three-card-inner {
padding-left: 12px;
padding-right: 12px;
padding-bottom: 24px;
height: 100%;
width: 100%;
}
/* Home page intro band - sits above the main-col-1/2/3 mash-up, giving a
first-time visitor a headline, one sentence of context, and a single
primary action before the podcasts/reads/carousel/events content (which
all carry equal visual weight) compete for attention. */
.site-intro {
width: 100%;
box-sizing: border-box;
padding: 8px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.site-intro-text {
flex: 1 1 420px;
}
.site-intro h1 {
font-size: 2.36rem;
line-height: 1.1;
}
.site-intro p {
margin: 0;
font-size: 0.9rem;
color: var(--retro-light);
line-height: 1.7;
}
.site-intro .btn {
flex: 0 0 auto;
font-size: 1.1rem;
padding: .5rem 1.2rem;
margin: auto 0;
}
.main-col-1 {
order: var(--main-col-1-sort);
padding: var(--main-col-1-padding);
width: var(--main-col-1-width);
}
.main-col-2 {
order: var(--main-col-2-sort);
/* padding: var(--main-col-2-padding);*/
width: var(--main-col-2-width);
}
.page-col-1 {
order: var(--page-col-1-sort);
padding: var(--main-col-1-padding);
width: var(--main-col-1-width);
}
.page-col-2 {
order: var(--page-col-2-sort);
padding: var(--main-col-2-padding);
width: var(--main-col-2-width);
}
.main-col-3 {
order: var(--main-col-3-sort);
padding: var(--main-col-3-padding);
width: var(--main-col-3-width);
}
.padding-left {
padding-left: 8px;
}
.padding-right {
padding-right: 6px;
}
.mobile-hide {
}
/*****************************************************************************/
/* Media Queries */
/*****************************************************************************/
@media only screen and (max-width: 5000px) {
:root {
--width-main-card: calc((100% - (5 * var(--width-flex-gap))) / 6);
--width-book-card: calc((100% - (8 * var(--width-flex-gap))) / 9);
--width-book-main: calc((100% - (2 * var(--width-flex-gap))) / 3);
--main-col-3-padding: 0 4px 0 0;
--base-font-size: 15px;
}
}
@media only screen and (max-width: 1536px) {
:root {
--width-main-card: calc((100% - (4 * var(--width-flex-gap))) / 5);
--width-book-card: calc((100% - (7 * var(--width-flex-gap))) / 8);
}
}
@media only screen and (max-width: 1280px) {
:root {
--width-main-card: calc((100% - (3 * var(--width-flex-gap))) / 4);
--width-book-card: calc((100% - (6 * var(--width-flex-gap))) / 7);
--width-book-main: calc((100% - (1 * var(--width-flex-gap))) / 2);
--main-col-1-width: 25%;
--main-col-2-width: 52%;
--main-col-3-width: 23%;
--page-banner-height: 192px;
}
}
@media only screen and (max-width: 1024px) {
:root {
--width-main-card: calc((100% - (2 * var(--width-flex-gap))) / 3);
--width-book-card: calc((100% - (5 * var(--width-flex-gap))) / 6);
--base-font-size: 14px;
--main-col-1-width: 30%;
--main-col-2-width: 70%;
--main-col-3-width: 100%;
--main-col-3-padding: 0 6px 0 6px;
--page-col-1-sort: 2;
--page-col-2-sort: 1;
--main-col-1-sort: 1;
--main-col-2-sort: 2;
--main-col-3-sort: 3;
--main-column-count: 1;
--page-banner-height: 154px;
}
.event-box {
width: 50%!important;
}
.mr-right-responsive {
margin-right: 8px!important;
}
.spec-row::before {
width: 24px;
height: 24px;
background-size: 24px 24px;
}
/* Shrink and pull the banner cross-link button toward the edge rather
than hiding it - keeps it available on mobile too. !important is
needed here since the base .catalog-switch-btn sizing further down
this file is otherwise the later (and therefore winning) declaration
at this same specificity, regardless of the media query matching. */
.catalog-switch-btn {
right: 8px !important;
font-size: .9rem !important;
padding: .25rem .6rem !important;
}
.site-intro h1 {
font-size: 2.1rem;
}
}
@media only screen and (max-width: 820px) {
:root {
--width-main-card: calc((100% - (1 * var(--width-flex-gap))) / 2);
--width-book-card: calc((100% - (4 * var(--width-flex-gap))) / 5);
--main-col-1-width: 35%;
--main-col-2-width: 65%;
--main-col-3-width: 100%;
--sticky-top: 36px;
--page-banner-height: 115px;
}
.sort-search {
width: 100% !important;
}
.sort-search-input {
width: 80% !important;
}
.btn-search {
width: 20% !important;
text-align: middle;
}
.spec-row::before {
width: 20px;
height: 20px;
background-size: 20px 20px;
}
.linkButton {
font-size: 0.95em;
}
.btn-sort {
padding-left: 4px !important;
padding-right: 4px !important;
font-size: 1rem;
}
.site-intro h1 {
font-size: 1.76rem;
}
}
@media only screen and (max-width: 640px) {
:root {
--width-book-card: calc((100% - (3 * var(--width-flex-gap))) / 4);
--width-book-main: calc((100% - (3 * var(--width-flex-gap))) / 4);
--main-col-1-width: 100%;
--main-col-2-width: 100%;
--main-col-3-width: 100%;
--main-col-1-padding: 0 0 0 4px;
--main-col-1-sort: 2;
--main-col-2-sort: 1;
--main-col-3-sort: 3;
--page-banner-height: 89px;
}
.hide-on-mobile {
display: none;
}
.order-2 {
display: block !important;
}
.order-1 {
display: flex;
}
[class*="rcol-"] {
width: 100% !important;
}
.padding-left {
padding-left: 0px!important;
}
.padding-right {
padding-right: 0px!important;
}
.ps-2 {
padding-left: 0px!important;
}
.linkButton::before {
width: 12px;
height: 12px;
}
.linkButton {
font-size: 0.9em;
}
.btn-sort {
padding-left: 2px !important;
padding-right: 2px !important;
font-size: .9rem !important;
}
.site-intro h1 {
font-size: 1.75rem;
}
}
@media only screen and (max-width: 512px) {
:root {
--width-book-card: calc((100% - (2 * var(--width-flex-gap))) / 3);
--width-book-main: calc((100% - (2 * var(--width-flex-gap))) / 3);
}
.event-box {
width: 100% !important;
}
[class*="rcol-"] {
width: 100% !important;
}
.site-intro h1 {
font-size: 1.3rem;
}
.site-intro-text p {
font-size: .75rem;
}
.col-4 {
width:50%;
}
.slide-title {
font-size:1.5rem!important;
}
}
@media only screen and (max-width: 390px) {
:root {
--width-book-card: calc((100% - (2 * var(--width-flex-gap))) / 2);
--width-book-main: calc((100% - (2 * var(--width-flex-gap))) / 2);
}
.event-box {
width: 100% !important;
}
[class*="rcol-"] {
width: 100% !important;
}
.site-intro h1 {
font-size: 1.1rem;
}
.slide-title {
font-size:1.3rem!important;
}
}
@media print {
body {
/* Force the browser to render screen styles */
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* Trick: tell the browser to use screen styles */
html {
zoom: 100%; /* keep proportions */
}
/* Avoid Bootstrap’s print overrides */
* {
visibility: visible !important;
overflow: visible !important;
}
}
/*****************************************************************************/
/* Podcast Styles */
/*****************************************************************************/
.btn-podcast {
border-radius: 36px !important;
background-color: #fff;
border: 1px solid var(--retro-gray) !important;
color: var(--retro-blue);
}
.btn-podcast:hover {
background-color: var(--retro-blue);
color: #fff;
}
.podcast-img {
width: 100%;
margin-bottom:6px;
margin-top:12px;
border-radius: 12px;
border: 1px solid var(--retro-gray);
}
.podcast-title {
padding-top: 6px;
padding-bottom: 4px;
}
.podcast-border {
border: 1px solid var(--retro-gray);
box-sizing: border-box;
height: 100%;
width: 100%;
margin-bottom: 6px;
margin-top:12px;
}
.episode-marker {
background-color: var(--retro-red);
right: 0px;
top: 0px;
border-radius: 50rem!important;
position: absolute!important;
display: inline-block;
padding: .35em .65rem;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
font-weight: 700;
right: 0px;
top: 0px;
}
.btn {
display: inline-block;
text-align: center;
text-decoration: none;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
padding: .25rem .8rem;
border-radius: .25rem;
margin: 3px;
border: 1px solid transparent;
font-family: inherit;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-sort {
color: #fff !important;
background-color: black;
border:none;
margin-left:0px;
margin-bottom: 5px;
padding-left: 8px;
padding-right: 8px;
font-size: 1.25rem;
}
.btn-sort:hover {
background-color: var(--retro-darkred)!important;
}
.btn-sort-active {
text-decoration: var(--retro-yellow) wavy underline! important;
}
.btn-main {
color: #aaa !important;
background-color: black;
border-color: #222;
margin-left:0px;
padding-left: 4px;
padding-right: 4px;
}
.btn-main:hover {
color: var(--retro-darkred)!important;
background-color: white!important;
border-color: var(--retro-border);
}
.btn-yellow {
background-color: var(--retro-yellow)!important;
border-color: var(--retro-yellow)!important;
color: black;
margin-right: 8px;
}
.btn-yellow:hover {
background-color: white!important;
border-color: white!important;
}
/*****************************************************************************/
/* Inline page search (black sort bar) */
/*****************************************************************************/
.sort-search {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
padding-right: 8px;
padding-bottom: 2px;
padding-top: 2px;
}
.sort-search-input {
background-color: var(--retro-dark);
color: white;
border: 1px solid var(--retro-medium);
border-radius: .25rem;
padding: .25rem .5rem;
font-family: inherit;
outline: none;
}
.sort-search-input:focus {
border-color: var(--retro-yellow);
}
.sort-search-input::placeholder {
color: var(--retro-gray);
}
/* Rotating LED-strip border around the current search match (a whole
.main-card, since search only matches on data-keywords now). */
@property --search-cursor-angle {
syntax: '
';
inherits: false;
initial-value: 0deg;
}
.search-match-cursor {
position: fixed;
border-radius: 8px;
pointer-events: none;
/* Below .sticky-top (1020) and .sticky-top-2 (1010), so the ring passes
behind the main nav / sort-search bar instead of drawing over them
while a matched card scrolls underneath. */
z-index: 1000;
/* border-image ignores border-radius (it's not clipped to rounded corners
in any browser), so the rotating gradient is painted as a background
instead and masked down to a ring - mask DOES respect border-radius. */
padding: 4px;
background: conic-gradient(from var(--search-cursor-angle), var(--retro-red), var(--retro-orange), var(--retro-yellow), var(--retro-red));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: search-cursor-spin 1.2s linear infinite;
}
@keyframes search-cursor-spin {
to {
--search-cursor-angle: 360deg;
}
}
/*****************************************************************************/
/* Backgrounds */
/*****************************************************************************/
.page-header {
background-repeat: no-repeat;
background-size: cover;
}
.podcast-background {
width: 100%;
aspect-ratio: 1280 / 140; /* Replace with your image's actual dimensions */
background-image: url("/resource/img/ui/banner_podcast1.webp");
background-repeat: no-repeat;
background-size: 100% auto;
position: relative;
}
.system-background {
width: 100%;
aspect-ratio: 1280 / 140; /* Replace with your image's actual dimensions */
background-image: url("/resource/img/ui/banner_system.webp");
background-repeat: no-repeat;
background-size: 100% auto;
position: relative;
}
.console-background {
width: 100%;
aspect-ratio: 1280 / 140; /* Replace with your image's actual dimensions */
background-image: url("/resource/img/ui/banner_console.webp");
background-repeat: no-repeat;
background-size: 100% auto;
position: relative;
}
.library-background {
width: 100%;
aspect-ratio: 1280 / 140; /* Replace with your image's actual dimensions */
background-image: url("/resource/img/ui/banner_library2.webp");
background-repeat: no-repeat;
background-size: 100% auto;
position: relative;
}
.news-background {
width: 100%;
aspect-ratio: 1280 / 140; /* Replace with your image's actual dimensions */
background-image: url("/resource/img/ui/banner_news.webp");
background-repeat: no-repeat;
background-size: 100% auto;
position: relative;
}
/* Cross-link banner button (Browse Consoles / Browse Computers) - sized to
match the home page's .site-intro .btn CTA. The banner scales with
aspect-ratio, and the logo artwork baked into the banner image occupies
more of the (proportionally shorter) width below ~1024px, so this is
hidden there rather than risk overlapping it - the Computers/Consoles nav
links remain the reliable path at every width regardless. */
.catalog-switch-btn {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
font-size: 1.1rem;
padding: .5rem 1.2rem;
margin: 0;
box-shadow: 0 0 32px black !important;
}
.catalog-switch-btn:hover {
box-shadow: 0 0 32px var(--retro-red) !important;
}
.books-background {
height: 200px;
background-image: url("/resource/img/ui/banner_books.webp");
background-repeat: no-repeat;
background-size:cover;
}
.text-shadow-black {
text-shadow: 2px 2px 24px black;
}
/*****************************************************************************/
/* Text expansion with a more button */
/*****************************************************************************/
.textExpansionBox input {
opacity: 0;
position: absolute;
pointer-events: none;
}
.textExpansionBox span {
display: -webkit-inline-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.textExpansionBox input:focus ~ label {
outline: -webkit-focus-ring-color auto 5px;
}
.textExpansionBox input:checked + span {
-webkit-line-clamp: unset;
overflow: visible;
}
.textExpansionBox label {
border-radius: 4px;
position: absolute;
right: 15px;
}
.expandText {
visibility: hidden;
}
.sys-text-2 {
column-count: var(--main-column-count); /* two columns */
column-gap: 2rem; /* spacing between them */
column-fill: balance; /* balance columns nicely */
}
.sys-text p {
display: block; /* make sure each paragraph flows properly */
margin-bottom: 1em;
}
/*****************************************************************************/
/* Book List Styles */
/*****************************************************************************/
.booklist-img {
width: 88px;
float: right;
height: 120px;
padding: 0;
margin: 3px;
-webkit-border-radius: 5px;
border-radius:5px;
}
.book-box {
flex-direction: column;
align-content:left;
text-align:left;
overflow: hidden;
position: relative;
}
.book-box-main {
width: var(--width-book-main);
}
.book-box-general {
width: var(--width-book-card);
}
.book-box-inner {
padding-bottom: 6px;
padding-top:0px;
}
.book-box p {
margin-bottom: 0.5rrem;
}
.book-box-img-box {
margin-bottom: 8px;
position: relative;
display: block;
}
.book-box-img-box img:first-child {
width:100%;
border: none;
}
.book-box-img-box:hover {
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
-webkit-transform: translateY(-5px) scale(1.1);
-moz-transform: translateY(-5px) scale(1.1);
-o-transform: translateY(-5px) scale(1.1);
transform: translateY(-5px) scale(1.1);
}
/*****************************************************************************/
/* News Styles */
/*****************************************************************************/
.article-img {
width: 188px;
border: none;
margin-top: 0px;
margin-bottom:4px;
margin-left: 8px;
float:none;
display: inline-block;
}
/*****************************************************************************/
/* Top info content */
/*****************************************************************************/
div.section-title {
margin-top:16px;
margin-bottom:8px;
padding-top:8px;
border-bottom:1px solid #aaa;
}
/*****************************************************************************
* Footer content
*****************************************************************************/
div.footer {
margin-top:8px;
margin-bottom:16px;
padding-right: 16px;
padding-left: 16px;
padding-top:8px;
padding-bottom:24px;
border-top:1px solid var(--retro-gray);
}
/******************************************************************************/
/* Event and Calendar Styles */
/******************************************************************************/
.calendar-tile {
width: 60px;
height: 100%;
background-color: var(--retro-red);
text-align: center;
color: var(--retro-dark);
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 0px 6px 6px 0px;
position: absolute;
top: 0px;
right: 0px;
}
.calendar-tile .month {
font-size: 20px;
margin-bottom: 0px;
font-weight: bold;
}
.calendar-tile .day {
font-size: 36px;
font-weight: bold;
margin-bottom: 2px;
margin-top: 2px;
color: white;
}
.calendar-tile .year {
font-size: 16px;
margin-bottom:4px;
}
.calendar-tile .duration {
color: var(--retro-yellow);
font-size: 14px;
font-style: italic;
}
.event-box {
width: 100%;
border-radius: 6px 0px 0px 6px;
}
.event-box-wide {
width: 100%;
border-radius: 6px 0px 0px 6px;
}
.event-box-padding {
margin-bottom: 12px!important;
padding-right: 56px;
}
.event-box-inner {
border: 1px solid var(--retro-gray);
width: 100%;
font-family: halyard-display, sans-serif;
border-radius: 6px 0px 0px 6px;
}
.event-image {
height: 106px;
}
.event-image img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 96%;
max-height: 86px;
}
.event-detail-img {
max-height: 180px;
max-width: 100%;
}
/*****************************************************************************/
/* Navigator bar */
/*****************************************************************************/
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}
.sticky-top-2 {
position: -webkit-sticky;
position: sticky;
top: var(--sticky-top);
z-index: 1010;
}
.search-bar {
padding-right:16px;
height: 40px;
}
.collapse:not(.show) {
display: none;
}
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: .5rrem;
padding-bottom: .5rrem;
}
.navbar details > summary {
list-style-type: none;
font-weight: 700;
padding-right: 16px;
font-size: 24px!important;
color: white;
background-color:transparent;
border: none;
}
.navbar details > summary img {
vertical-align: middle;
}
.navbar details > summary::-webkit-details-marker {
display: none;
}
.navbar details > summary::before {
content: '☰';
}
.navbar details[open] > summary::before {
color: var(--retro-darkred);
}
.navbar details {
padding-left: 0.5rrem;
}
.navbar details[open] > summary {
margin-bottom: 0.5rrem;
}
.navlink {
align-content: center;
display: inline-flex;
flex-wrap: wrap;
padding-left: 12px!important;
}
.navlink a {
font-size: 16px!important;
font-weight: 600!important;
color: #fff;
text-decoration:none;
}
.navlink a:hover {
color: var(--retro-yellow);
}
.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
}
.navbar-nav {
display: flex;
padding-left: 0;
list-style: none;
margin-top: 0;
flex-direction: column;
}
@media (min-width: 992px) {
.navbar-expand-lg {
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-lg .navbar-toggler {
display: none;
}
.navbar-expand-lg .navbar-collapse {
display: flex!important;
flex-basis: auto;
}
.navbar-expand-lg .navbar-nav {
flex-direction: row;
}
.mb-lg-0 {
margin-bottom: 0!important;
}
}
.form-label {
margin-bottom: .5rrem;
}
label {
display: inline-block;
}
.form-control {
display: block;
width: 100%;
padding: .3rem .75rem;
font-size: 1.0rem;
font-weight: 400;
line-height: 1.2;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.badge {
display: inline-block;
padding: 0 .65rem;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
}
/*****************************************************************************/
/* Border Options */
/*****************************************************************************/
.border-dark {
border: 1px solid var(--retro-dark);
}
.border-light {
border: 1px solid var(--retro-gray);
}
.border-light-top {
border-top: 1px solid var(--retro-gray);
}
.border-light-bottom {
border-bottom: 1px solid var(--retro-gray);
}
.border-red-bottom {
border-bottom: 1px solid var(--retro-red);
}
.border-red-bottom-dashed {
border-bottom: 2px dashed var(--retro-red);
}
.border-rad-4 {
border-radius: 4px;
}
.border-rad-8 {
border-radius: 8px !important;
}
/*****************************************************************************/
/* Navigator bar */
/*****************************************************************************/
.date-bar {
height: 32px;
width: 100%;
background-color:var(--retro-dark);
color: #c9c9c9;
font-size: 0.76em;
}
.like {
background-color:var(--retro-darkblue);
font-weight: 900;
color: white;
display: block;
width: 90px;
height: 31px;
border-radius: 4px;
text-align: center;
font-size: 20px;
padding-top:2px;
}
.search-box {
width: 80%;
max-width: 600px;
margin: 1px 0 1px 1px;
padding: 0;
max-height: none;
outline: none;
box-sizing: border-box;
height: 32px;
vertical-align: top;
background: url("/resource/img/ui/ui_search.png");
background-position-y: 5px;
background-position-x: 8px;
background-size: 24px;
background-repeat: no-repeat;
text-align: left;
}
.search-input {
background-color: transparent;
overflow: hidden;
-webkit-appearance: none;
height: 32px;
appearance: none;
resize: none;
font-family: 'Roboto';
font-weight: 300;
border: none;
width: 80%;
border: 0;
outline: none;
}
.search-submit {
background-color: transparent;
width: 24px;
height: 24px;
text-indent: -99rem;
border-width: 0;
border-style: solid;
margin: 5px 5px 5px 5px;
position: relative;
left: 2px;
cursor:pointer;
}
.hero-image {
max-height: 460px;
object-fit: contain;
width: 90%;
}
/*******************************************************************
Image Lightbox
********************************************************************/
.lightbox {
--overlay-bg: rgba(255, 255, 255, 0.85); /* 70% gray filter */
--overlay-bg2: rgba(128, 128, 128, 0.63); /* 70% gray filter */
--radius: 12px;
--shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
--speed: 420ms;
--easing: cubic-bezier(.2,.7,.2,1);
margin-inline-start: 0;
margin-inline-end: 0;
text-align: center;
}
.lightbox__toggle {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
clip-path: inset(50%);
border: 0;
margin: -1px;
padding: 0;
}
.lightbox__thumb {
cursor: zoom-in;
}
.lightbox__thumb img {
width: 99%;
object-fit: contain;
height: auto;
border-radius: 0;
max-height: 270px;
}
.lightbox__overlay {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: var(--overlay-bg2);
opacity: 0;
visibility: hidden;
transition: opacity var(--speed) var(--easing), visibility var(--speed) var(--easing);
cursor: zoom-out;
z-index: 9999;
}
.lightbox__overlay img {
width: auto;
height: auto;
display: block;
max-width: 80vw;
max-height: 80vh;
min-width: 50vw;
object-fit: contain; /* preserves aspect ratio */
border-radius: var(--radius);
box-shadow: var(--shadow);
background: var(--overlay-bg);
transition: transform var(--speed) var(--easing);
transform: scale(.98);
}
.lightbox__toggle:checked ~ .lightbox__overlay {
opacity: 1;
visibility: visible;
}
.lightbox__toggle:checked ~ .lightbox__overlay img {
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
.lightbox__overlay,
.lightbox__overlay img {
transition: none;
}
}
/*************************************************************************
Carrousel
**************************************************************************/
.carousel {
width: 100%; /* set as needed */
aspect-ratio:2;
position: relative;
overflow: hidden;
border-radius: 8px !important;
border: 1px solid var(--retro-gray);
margin-left:8px;
margin-right:8px;
padding: 0;
}
/* SLIDES */
.slides {
display: flex;
width: 600%; /* 100% × number of slides */
height: 100%;
animation: slide 39s infinite;
}
.slide {
width: 100%;
flex-shrink: 0;
height: 100%;
}
.slide-panel {
width: 16.66667%;
height: 90% !important;
}
.slide-title {
font-size: 1.75rem;
font-size: clamp(1.1rem, 7cqw, 1.75rem);
font-weight: 400;
}
.slide-info-bar {
background-color: var(--retro-light);
font-size: 18px;
font-weight: 200;
font-size: clamp(8px, 1.5cqw, 18px);
position: absolute;
bottom: 64px;
padding: 4px 0px 4px 16px;
opacity: 0.85;
width: 65%;
}
.slide-content {
width: 100%;
max-width: 100%;
height: 100%;
position: relative;
}
.slide-img-panel {
height: 96% !important;
}
.slide img {
width: 100% !important;
max-height: 90% !important;
object-fit: contain;
}
/* DOTS */
.dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
.dots span {
width: 10px;
height: 10px;
background: var(--retro-gray);
border-radius: 50%;
animation: dot 39s infinite;
}
/* DOT TIMING */
.dots span:nth-child(1) { animation-delay: 0s; }
.dots span:nth-child(2) { animation-delay: 6.5s; }
.dots span:nth-child(3) { animation-delay: 13s; }
.dots span:nth-child(4) { animation-delay: 19.5s; }
.dots span:nth-child(5) { animation-delay: 26s; }
.dots span:nth-child(6) { animation-delay: 32.5s; }
/* SLIDE ANIMATION */
@keyframes slide {
0%, 15.4% { transform: translateX(0); }
16.7%, 32% { transform: translateX(-100%); }
33.3%, 48.7% { transform: translateX(-200%); }
50%, 65.4% { transform: translateX(-300%); }
66.7%, 82% { transform: translateX(-400%); }
83.3%, 98.7% { transform: translateX(-500%); }
100% { transform: translateX(0); }
}
/* DOT ANIMATION */
@keyframes dot {
0%, 15.4% { background: var(--retro-red); }
16.7%, 100% { background: var(--retro-gray); }
}
.yt-card-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
max-width: 600px;
background-color: #ffffff;
transition: box-shadow 0.3s ease;
margin: 20px auto;
}
.yt-card-container:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.yt-card-header {
display: flex;
align-items: center;
padding: 12px 16px;
text-decoration: none;
color: #1f1f1f;
border-bottom: 1px solid #f0f0f0;
}
.yt-logo {
width: 24px;
height: 24px;
margin-right: 12px;
}
.yt-info {
flex-grow: 1;
}
.yt-title {
font-size: 14px;
font-weight: 600;
margin: 0;
display: block;
}
.yt-meta {
font-size: 12px;
color: #707070;
margin-top: 2px;
}
.yt-video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
height: 0;
}
.yt-video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.linkButton {
background-color: transparent;
color: var(--retro-medium);
border: none;
/* padding-left: 8px;
padding-right: 8px;*/
height: 30px;
align-self: end;
padding-top: 2px;
padding-bottom: 1px;
width: 33%;
font-size: 12px;
font-weight: 200;
}
.linkButton:hover {
background-color: var(--retro-red);
color: #fff;
}
/* Like/Favorite/Share icons: used to be an inline