/* ══════════════════════════════════════════════════════════════════════════
iLindy — bringing the platform closer to ilindy.com
══════════════════════════════════════════════════════════════════════════
Appended rather than woven in, so removing it is deleting from here down.
Every value below is lifted from the website's own stylesheet, not chosen:
the pill button, the near-black footer, the 900-weight uppercase display
and the gold are what ilindy.com already does.
Two things were already right and are deliberately untouched: the fonts
(Raleway and Questrial, matching) and --primary #3c5cbf, which is the
website's own --blue.
Scope worth knowing: the header and footer appear on every page, so they
carry most of this. The theme:section blocks exist only on the home page,
which signed-out visitors no longer see.
────────────────────────────────────────────────────────────────────── */
:root {
--il-gold: #F9CA47;
--il-ink: #1A1A2E;
--il-night: #0B0918;
--il-cream: #FBF7EE;
--il-indigo: #322D8F;
}
/* The theme's near-black is a neutral grey; the website's ink carries a blue
cast that reads as part of the palette rather than as "off". */
[data-theme="light"] {
--base-color: var(--il-ink);
--footer-background-color: var(--il-night);
}
/* ── buttons ───────────────────────────────────────────────────────────
The website's buttons are pills, and it is the single change that most
makes a page look like it belongs to the same company. */
.theme\:button .button-bg {
border-radius: 999px;
}
.theme\:button {
font-family: var(--heading-font);
font-weight: 800;
letter-spacing: 0.01em;
}
/* The Join button is the one call to action in the header; on the website
that job belongs to gold on black, never to the blue. */
.theme\:navigation .theme\:button:not(.button--secondary) .button-bg {
background: var(--il-gold);
border-color: var(--il-gold);
box-shadow: 0 6px 18px rgba(249, 202, 71, 0.3);
}
.theme\:navigation .theme\:button:not(.button--secondary) {
color: #000;
}
/* ── display headings ──────────────────────────────────────────────────
900, uppercase, set tight - .display on the website. Section titles only:
a course name is a name and must keep its own capitals. */
.theme\:title,
.featured-category-title {
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.01em;
line-height: 0.98;
}
/* ── footer ────────────────────────────────────────────────────────────
The token above turns the ground near-black; the ink has to follow it or
the whole footer becomes dark text on a dark ground. */
.theme\:footer {
color: #FFFFFF;
padding: 64px 0 40px;
}
.theme\:footer a { color: rgba(255, 255, 255, 0.82); }
.theme\:footer a:hover { color: var(--il-gold); }
.theme\:footer hr { border-color: rgba(255, 255, 255, 0.14); }
/* ── the gold, where it can actually land ──────────────────────────────
The platform had none of it. These are the moments the website gives it:
a hovered link, the live dot in a carousel, the edge of a focused field. */
.theme\:link:hover,
.theme\:navigation-url:hover,
.page-content a:hover {
color: var(--il-gold);
}
.slider--container .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: var(--il-gold);
opacity: 1;
}
.card-title a:hover,
.category-carousel__slide a:hover .card-title {
color: var(--il-indigo);
}
/* ── catalogue cards ───────────────────────────────────────────────────
Uscreen's own UI, not theme blocks, so only the surface is touched: the
corner and the lift. Nothing structural, because the markup is theirs and
can change under us. */
.card-image-container,
.card-image {
border-radius: 12px;
}
.card-image-container {
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-image-container:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(26, 26, 46, 0.16);
}
.card-title {
font-family: var(--heading-font);
font-weight: 700;
}
/* ── keyboard focus ────────────────────────────────────────────────────
Gold reads on both the light ground and the dark footer, which is why the
website uses it here too. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 2px solid var(--il-gold);
outline-offset: 2px;
}
