88 lines
4.9 KiB
CSS
88 lines
4.9 KiB
CSS
/* ClassroomIO thumbnail brand tokens — Figma-exact. Consume these; do not eyeball.
|
|
Palette: deep blue #0233BD · brand blue #2F6BF1 · light blue #ADC3FF · violet #8071F2 */
|
|
|
|
@font-face {
|
|
font-family: 'Geist';
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: block;
|
|
src: url(data:font/woff2;base64,__GEIST_WOFF2_B64__) format('woff2');
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { width: 1920px; height: 1080px; }
|
|
|
|
body {
|
|
font-family: 'Geist', sans-serif;
|
|
width: 1920px; height: 1080px; position: relative; overflow: hidden;
|
|
/* Royal-blue full-bleed with center-bright vignette */
|
|
background: radial-gradient(120% 110% at 50% 42%, #2B5BE0 0%, #1D49C7 42%, #12318F 78%, #0E2A7E 100%);
|
|
}
|
|
|
|
/* --- faint white texture (keep ~5-12% opacity; never competes with title) --- */
|
|
.texture { position: absolute; inset: 0; pointer-events: none; }
|
|
.card-line {
|
|
position: absolute; top: 50%; left: 50%;
|
|
border: 2px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 60px; transform: translate(-50%, -58%);
|
|
}
|
|
.spark { position: absolute; color: #8FE8DC; opacity: .85; font-size: 34px; }
|
|
|
|
/* --- frame (logo + wordmark on ONE edge, domain on the other; never both edges) --- */
|
|
.frame { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 72px; align-items: center; }
|
|
.frame.top { top: 52px; }
|
|
.frame.bottom { bottom: 52px; }
|
|
.brand { display: flex; align-items: center; gap: 18px; }
|
|
.brand img { width: 52px; height: 52px; filter: brightness(0) invert(1); }
|
|
.brand .name { color: #fff; font-size: 40px; font-weight: 700; letter-spacing: -1px; }
|
|
.domain { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 34px; font-weight: 600; }
|
|
.domain .globe { width: 36px; height: 36px; border: 2.5px solid #fff; border-radius: 50%; position: relative; opacity: .92; }
|
|
.domain .globe::before { content: ''; position: absolute; inset: -2.5px 8px; border: 2.5px solid #fff; border-radius: 50%; }
|
|
.domain .globe::after { content: ''; position: absolute; left: -2.5px; right: -2.5px; top: 50%; height: 0; border-top: 2.5px solid #fff; transform: translateY(-1px); }
|
|
.domain span { text-decoration: underline; text-underline-offset: 6px; }
|
|
|
|
/* --- glass icon tile (patterns C & D): blue gradient fill + iridescent border, NOT frosted white --- */
|
|
.tile-wrap {
|
|
padding: 2.5px; border-radius: 44px;
|
|
background: linear-gradient(135deg, #0233BD 23%, #ADC3FF 42%, #8071F2 54%, #0233BD 82%);
|
|
box-shadow: 0 40px 80px rgba(6, 18, 66, 0.45);
|
|
}
|
|
.tile {
|
|
width: 300px; height: 300px; border-radius: 42px;
|
|
background: linear-gradient(145deg, #0233BD 10%, #2F6BF1 94%);
|
|
display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
|
|
}
|
|
.tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 55%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)); }
|
|
.tile img { width: 172px; height: 172px; filter: brightness(0) invert(1); position: relative; z-index: 1; }
|
|
.tile .svg-icon { width: 186px; height: auto; position: relative; z-index: 1; }
|
|
.tile .svg-icon svg { width: 100%; height: auto; }
|
|
.tile .label { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 26px; font-weight: 600; letter-spacing: .5px; }
|
|
|
|
/* --- connector (two-tile / before->after) --- */
|
|
.connector { display: flex; align-items: center; margin: 0 -6px; z-index: 2; }
|
|
.connector .dash { width: 44px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.35); }
|
|
.connector .node {
|
|
width: 74px; height: 74px; margin: 0 10px; border-radius: 50%;
|
|
padding: 2.5px; background: linear-gradient(135deg, #0233BD 23%, #ADC3FF 42%, #8071F2 54%, #0233BD 82%);
|
|
box-shadow: 0 16px 32px rgba(6, 18, 66, 0.4);
|
|
}
|
|
.connector .node-inner { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(145deg, #0233BD 10%, #2F6BF1 94%); display: flex; align-items: center; justify-content: center; }
|
|
.connector .node-inner svg { width: 36px; height: 36px; }
|
|
|
|
/* --- pill / badge: fully gradient-built (fill + iridescent border + clipped gradient text) --- */
|
|
.pill-wrap {
|
|
padding: 2px; border-radius: 999px;
|
|
background: linear-gradient(180deg, #0233BD 24%, #C1D4FF 55%, #93B4FF 80%);
|
|
box-shadow: 0 16px 32px rgba(6, 18, 66, 0.35);
|
|
}
|
|
.pill { height: 70px; padding: 0 40px; border-radius: 999px; background: linear-gradient(180deg, #0233BD 0%, #0C4BDA 100%); display: flex; align-items: center; }
|
|
.pill span {
|
|
font-size: 30px; font-weight: 700; letter-spacing: .5px;
|
|
background: linear-gradient(180deg, #FFFFFF 0%, #8EACFF 100%);
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
|
|
/* --- title: bold white Title Case, tight tracking; lighter 78%-white tail for hierarchy --- */
|
|
.title { color: #fff; font-weight: 700; line-height: 1.02; letter-spacing: -3px; }
|
|
.title .tail { font-weight: 500; color: rgba(255, 255, 255, 0.78); }
|