/*csslint bulletproof-font-face: false*/
/* #region CSS PROPERTY ORDER GUIDE */
/* ==================================================
FORMAT FOR CSS
keep stuff in this order:
.example {
1. positioning
position:
top:
right:
bottom:
left:
z-index:
2. layout
display:
flex-direction:
justify-content:
align-items:
gap:
overflow:
3. size
width:
min-width:
max-width:
height:
min-height:
max-height:
4. spacing
margin:
padding:
5. text
font-family:
font-size:
font-weight:
line-height:
letter-spacing:
word-spacing:
text-align:
text-decoration:
color:
6. appearance
background:
border:
border-radius:
box-shadow:
opacity:
7. transformations
transform:
transform-origin:
8. interaction + animation
cursor:
pointer-events:
visibility:
transition:
animation:
}
================================================== */
/* #endregion */
/* #region CUSTOM HANDWRITING FONT */
/* ==================================================
custom handwriting font
================================================== */
/*
loads my custom handwriting font
[font-family] = name I use later to call the font
[src] = location of font file
[format] = tells browser the type of font file
../ means go BACK one folder
cerebro/
cerebro.css
../fonts/
O4tolo-Regular.ttf
*/
@font-face {
font-family: "Bela Handwriting";
src: url("../fonts/O4tolo-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/* #endregion */
/* #region CEREBRO PAGE SETUP */
/* ==================================================
cerebro page setup
================================================== */
/*
body of /cerebro/ page
[class="cerebro-page"] goes on the
[margin: 0] = removes default browser space around page
[display: flex] = lets page content be centered
[justify-content] = centers horizontally
[align-items] = centers vertically
[overflow: hidden] = prevents scrollbars
[height: 100vh] = makes page height equal browser window
[font-family] = makes custom handwriting font the
default font for this page
[background-color] = makes page black
*/
.cerebro-page {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
height: 100vh;
margin: 0;
font-family: "Bela Handwriting", sans-serif;
background-color: black;
}
/* #endregion */
/* #region CEREBRO STAGE */
/* ==================================================
cerebro stage
================================================== */
/*
full-screen container that holds the brain image
[position: relative] = lets things inside the stage
use this container for absolute positioning
[width / height: 100%] = fills the cerebro page
flex centers the brain inside the stage
*/
.cerebro-stage {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
/* #endregion */
/* #region CEREBRO MAP */
/* ==================================================
cerebro map
================================================== */
/*
holds:
- full brain
- clickable hemisphere hotspots
- hemisphere highlights
[position: relative] = makes this container
the positioning reference for hotspots + images
width and height match original brain image
[scale(1.35)] = keeps same large size
the old .cerebro-top image used
*/
.cerebro-map {
position: relative;
width: 463px;
height: 539px;
transform: scale(1.35);
}
/* #endregion */
/* #region CEREBRO MAP IMAGES */
/* ==================================================
cerebro map images
================================================== */
/*
all brain images occupy the same exact space
this allows:
full brain
left highlight
right highlight
to stack perfectly
*/
.cerebro-map-base,
.brain-highlight {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* #region full brain */
/*
normal brain image underneath everything
*/
.cerebro-map-base {
z-index: 1;
}
/* #endregion */
/* #region hemisphere highlights */
/*
left + right highlight images start invisible
[z-index: 2] = highlights sit over base brain
[pointer-events: none] = highlight images
cannot block mouse from reaching hotspots
*/
.brain-highlight {
z-index: 2;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
/* #endregion */
/* #endregion */
/* #region BRAIN REGION HOTSPOTS */
/* ==================================================
brain region hotspots
================================================== */
/*
shared class for clickable brain regions
[z-index: 3] = hotspots sit above
brain images and highlights
later you can reuse brain-region for
lobes and internal structures
*/
.brain-region {
position: absolute;
z-index: 3;
display: block;
cursor: pointer;
}
/* #region left hemisphere hotspot */
/*
clickable area covering left half
of superior brain view
these numbers can be adjusted later
to fit your drawing exactly
*/
.hotspot-left-brain {
top: 8%;
left: 5%;
width: 45%;
height: 84%;
}
/* #endregion */
/* #region right hemisphere hotspot */
/*
clickable area covering right half
of superior brain view
*/
.hotspot-right-brain {
top: 8%;
right: 5%;
width: 45%;
height: 84%;
}
/* #endregion */
/* #endregion */
/* #region BRAIN HOVER HIGHLIGHT */
/* ==================================================
brain hover highlight
================================================== */
/*
shows hemisphere highlight when its hotspot
is hovered or selected with keyboard
+ means:
select the element DIRECTLY AFTER hotspot
HTML must stay:
![]()
*/
.brain-region:hover + .brain-highlight,
.brain-region:focus-visible + .brain-highlight {
opacity: 1;
}
/* #endregion */
/* #region REAL BRAIN SCAN LINK */
/* ==================================================
real brain scan link
================================================== */
/*
link in bottom-left corner of cerebro page
[position: absolute] = positions link inside
.cerebro-stage
[left] = distance from left side
[bottom] = distance from bottom
Arial overrides the custom handwriting font
so this looks like a boring/default web link
*/
.brain-scan-link {
position: absolute;
left: 40px;
bottom: 30px;
font-family: Arial, sans-serif;
font-size: 24px;
text-decoration: underline;
}
/* #region brain scan link colors */
/*
normal unvisited HTML link blue
:link = link has NOT been visited yet
*/
.brain-scan-link:link {
color: #0000ee;
}
/*
default-style purple after visiting
:visited = browser remembers that this link
has already been opened
*/
.brain-scan-link:visited {
color: #551a8b;
}
/* #endregion */
/* #endregion */
/* #region MOBILE CEREBRO PAGE */
/* ==================================================
mobile cerebro page
================================================== */
/*
changes cerebro layout on smaller screens
@media = these rules only apply when browser
is 768px wide or smaller
desktop layout stays exactly the same
*/
@media (max-width: 768px) {
/* #region mobile cerebro page setup */
/* ==================================================
mobile cerebro page setup
================================================== */
/*
keeps page filling phone screen
overflow stays hidden so brain does not
create accidental scrollbars
*/
.cerebro-page {
overflow: hidden;
width: 100%;
min-height: 100vh;
}
/* #endregion */
/* #region mobile cerebro stage */
/* ==================================================
mobile cerebro stage
================================================== */
/*
keeps brain centered inside phone screen
*/
.cerebro-stage {
width: 100%;
height: 100vh;
}
/* #endregion */
/* #region mobile cerebro brain image */
/* ==================================================
mobile cerebro brain image
================================================== */
/*
desktop brain uses scale(1.35)
mobile version makes brain smaller so more of
the artwork fits inside the narrow phone screen
*/
.cerebro-top {
width: auto;
max-width: 95vw;
height: auto;
max-height: 80vh;
transform: scale(1.05);
}
/* #endregion */
/* #region mobile real brain scan link */
/* #region mobile real brain scan link */
/* ==================================================
mobile real brain scan link
================================================== */
/*
keeps link visible above brain + browser controls
[z-index] = keeps link above brain image
[bottom] = raises link farther from bottom edge
*/
.brain-scan-link {
position: absolute;
left: 50%;
bottom: 60px;
z-index: 10;
width: 90%;
font-size: 16px;
text-align: center;
transform: translateX(-50%);
}
/* #endregion */
}
/* #endregion */