/* The homepage's Products slide (#b03): gliding over a product card changes the card to that product's colours and brings that product's picture up in the background of the page (next/product-themes.js). Each product has its own theme, taken from its own page: Saksham Mulberry #7A1F5B and Gold #F2A900 (Gold on Mulberry 4.8:1, Paper on Mulberry 8.8:1); the background is a deeper Mulberry (#4D1B3C, Mulberry mixed with Ink) with the isometric campus, the same drawing as the Saksham page, playing in Samanvay FRAE Blue #2457D6 (Light on it 5.75:1) on the card; Deep Navy #111A2E behind, with a wall of instruments (dials, rings, bars, lines, a radar ...) rising and falling Tamkeen hunter green #466245 (the light type #EAE6DA on it 5.4:1) on the card; dark green #20321E behind, with the sunlit facade and the shadow sliding across it Under it all the page's own type stays Paper; the accent (eyebrow, rule) takes the theme's accent. It answers a pointer and the keyboard focus alike; the background is dimmed under a veil so the type on the other two cards stays legible. */ /* the cards ----------------------------------------------------------------------------------------------------------------------------------------- */ #b03 .prod-card { transition: background-color .45s ease, border-color .45s ease, color .45s ease, translate .4s var(--ease); } #b03 .prod-card[data-theme="saksham"]:hover, #b03 .prod-card[data-theme="saksham"]:focus-visible { background: #7A1F5B; border-color: #F2A900; color: #F7F4ED; } #b03 .prod-card[data-theme="saksham"]:hover .pc-name, #b03 .prod-card[data-theme="saksham"]:focus-visible .pc-name, #b03 .prod-card[data-theme="saksham"]:hover .pc-script, #b03 .prod-card[data-theme="saksham"]:focus-visible .pc-script { color: #F7F4ED; } #b03 .prod-card[data-theme="saksham"]:hover .pc-line, #b03 .prod-card[data-theme="saksham"]:focus-visible .pc-line { color: #E8DADC; } #b03 .prod-card[data-theme="saksham"]:hover .status, #b03 .prod-card[data-theme="saksham"]:focus-visible .status, #b03 .prod-card[data-theme="saksham"]:hover .pc-go, #b03 .prod-card[data-theme="saksham"]:focus-visible .pc-go { color: #F2A900; } #b03 .prod-card[data-theme="saksham"]:hover .status i, #b03 .prod-card[data-theme="saksham"]:focus-visible .status i { background: #F2A900; } #b03 .prod-card[data-theme="samanvay"]:hover, #b03 .prod-card[data-theme="samanvay"]:focus-visible { background: #2457D6; border-color: #8FA8F0; color: #F5F7FC; } #b03 .prod-card[data-theme="samanvay"]:hover .pc-name, #b03 .prod-card[data-theme="samanvay"]:focus-visible .pc-name, #b03 .prod-card[data-theme="samanvay"]:hover .pc-script, #b03 .prod-card[data-theme="samanvay"]:focus-visible .pc-script, #b03 .prod-card[data-theme="samanvay"]:hover .pc-line, #b03 .prod-card[data-theme="samanvay"]:focus-visible .pc-line, #b03 .prod-card[data-theme="samanvay"]:hover .status, #b03 .prod-card[data-theme="samanvay"]:focus-visible .status, #b03 .prod-card[data-theme="samanvay"]:hover .pc-go, #b03 .prod-card[data-theme="samanvay"]:focus-visible .pc-go { color: #F5F7FC; } #b03 .prod-card[data-theme="samanvay"]:hover .status i, #b03 .prod-card[data-theme="samanvay"]:focus-visible .status i { background: #F5F7FC; } #b03 .prod-card[data-theme="tamkeen"]:hover, #b03 .prod-card[data-theme="tamkeen"]:focus-visible { background: #466245; border-color: #D4AF37; color: #EAE6DA; } #b03 .prod-card[data-theme="tamkeen"]:hover .pc-name, #b03 .prod-card[data-theme="tamkeen"]:focus-visible .pc-name, #b03 .prod-card[data-theme="tamkeen"]:hover .pc-script, #b03 .prod-card[data-theme="tamkeen"]:focus-visible .pc-script, #b03 .prod-card[data-theme="tamkeen"]:hover .pc-line, #b03 .prod-card[data-theme="tamkeen"]:focus-visible .pc-line, #b03 .prod-card[data-theme="tamkeen"]:hover .status, #b03 .prod-card[data-theme="tamkeen"]:focus-visible .status, #b03 .prod-card[data-theme="tamkeen"]:hover .pc-go, #b03 .prod-card[data-theme="tamkeen"]:focus-visible .pc-go { color: #EAE6DA; } #b03 .prod-card[data-theme="tamkeen"]:hover .status i, #b03 .prod-card[data-theme="tamkeen"]:focus-visible .status i { background: #D4AF37; } /* the page while a card is hovered: the accent and the hairlines follow the theme */ #b03[data-pt="saksham"] { --accent: #F2A900; --accent-text: #F2A900; --line: rgba(247, 244, 237, .28); } #b03[data-pt="samanvay"] { --accent: #8FA8F0; --accent-text: #8FA8F0; --line: rgba(143, 168, 240, .32); } #b03[data-pt="tamkeen"] { --accent: #D4AF37; --accent-text: #D4AF37; --line: rgba(234, 230, 218, .28); } /* the other two cards sit on a frosted, theme-coloured backing, so their type stays legible whatever is moving behind them */ #b03[data-pt="saksham"] .prod-card:not(:hover):not(:focus-visible) { background: rgba(77, 27, 60, .76); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #b03[data-pt="samanvay"] .prod-card:not(:hover):not(:focus-visible) { background: rgba(17, 26, 46, .76); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #b03[data-pt="tamkeen"] .prod-card:not(:hover):not(:focus-visible) { background: rgba(32, 50, 30, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* the background ------------------------------------------------------------------------------------------------------------------------------------ */ .pt-layer { position: fixed; inset: 0; z-index: 1; pointer-events: none; } .pt-theme { position: absolute; inset: 0; opacity: 0; overflow: hidden; transition: opacity .6s ease; } .pt-theme::after { content: ""; position: absolute; inset: 0; } /* the veil: keeps the type above it legible */ .pt-layer[data-active="saksham"] .pt-theme--saksham, .pt-layer[data-active="samanvay"] .pt-theme--samanvay, .pt-layer[data-active="tamkeen"] .pt-theme--tamkeen { opacity: 1; } .pt-theme--saksham { background: #4D1B3C; } .pt-theme--saksham::after { background: radial-gradient(70% 90% at 22% 18%, rgba(77, 27, 60, .86) 0%, rgba(77, 27, 60, .35) 70%, rgba(77, 27, 60, .1) 100%); } .pt-theme--samanvay { background: #111A2E; } .pt-theme--samanvay::after { background: radial-gradient(46% 20% at 24% 36%, rgba(17, 26, 46, .85) 0%, rgba(17, 26, 46, 0) 100%), rgba(17, 26, 46, .5); } /* a little more over the heading */ .pt-wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); padding: 10px; opacity: .42; --sv-t: 1s; } .pt-wall .sv-w { place-self: center; width: 100%; max-width: calc((100svh - 20px) / 5 * .9); } @media (max-width: 1100px) { .pt-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } .pt-wall .sv-w:nth-child(n+31) { display: none; } } .pt-theme--tamkeen { background: #20321E; } .pt-theme--tamkeen::after { background: rgba(32, 50, 30, .7); } .pt-theme--tamkeen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } @media (prefers-reduced-motion: reduce) { .pt-theme { transition-duration: .01s; } }