.diagram-container {
position: relative;
background: var(--card-bg);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: all 0.3s ease;
height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
.diagram-container:hover {
transform: scale(1.02);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
.fullscreen-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 999;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
.fullscreen-overlay.active {
display: flex;
}
.fullscreen-content {
background: var(--card-bg);
border-radius: 16px;
max-width: 95%;
max-height: 95%;
overflow: auto;
position: relative;
}
.close-button {
position: absolute;
top: 15px;
right: 15px;
background: var(--error-color);
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 20px;
cursor: pointer;
z-index: 1001;
transition: all 0.2s ease;
}
.close-button:hover {
background: #c74545;
transform: scale(1.1);
}
.preview-diagram {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.preview-diagram::after {
content: "Click to explore full diagram";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(139, 115, 85, 0.9);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 10;
}
.diagram-container:hover .preview-diagram::after {
opacity: 1;
}
.diagram {
display: flex;
align-items: flex-start;
gap: 120px;
margin: 40px 0;
padding: 40px;
background: var(--card-bg);
border-radius: 16px;
box-shadow: 0 6px 20px var(--shadow-light);
position: relative;
overflow-x: auto;
}
.column {
display: flex;
flex-direction: column;
gap: 15px;
min-width: 220px;
position: relative;
}
.epoch-header {
background-color: var(--background-darker-3-color) !important;
color: var(--text-muted);
padding: 12px 24px;
border-radius: 10px;
font-weight: bold;
text-align: center;
font-size: 20px;
font-family: var(--font-headings);
box-shadow: 0 3px 10px var(--shadow-light);
margin-bottom: 10px;
}
.section-divider {
position: relative;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 0;
margin-right: 0;
text-align: center;
color: var(--text-muted);
font-size: 14px;
font-style: italic;
}
.section-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--border-light);
z-index: 0;
}
.section-divider span {
background: var(--card-bg);
padding: 0 15px;
position: relative;
z-index: 1;
}
a.block,
a.block:link,
a.block:visited {
background: var(--background-darker-1-color) !important;
border: 2px solid var(--border-color) !important;
border-radius: 10px !important;
padding: 4px 24px !important;
text-decoration: none !important;
color: var(--text-primary) !important;
font-weight: 600 !important;
font-size: 0.85rem;
transition: all 0.3s ease !important;
position: relative;
text-align: center;
box-shadow: 0 2px 8px var(--shadow-light) !important;
cursor: pointer;
user-select: none;
display: block;
}
.block-shift {
margin-top: 30px;
}
.block-shift-2x {
margin-top: 60px;
}
.block-shift-3x {
margin-top: 90px;
}
a.block:hover,
a.block:active {
background: var(--background-darker-2-color) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px var(--shadow-medium) !important;
border-color: var(--accent-color) !important;
text-decoration: none !important;
color: var(--text-primary) !important;
}
a.block.highlight-direct,
a.block.highlight-direct:hover,
a.block.highlight-direct:active,
a.block.highlight-direct:link,
a.block.highlight-direct:visited {
background: var(--success-color) !important;
color: var(--button-text) !important;
border-color: var(--success-color) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(108, 136, 54, 0.3) !important;
text-decoration: none !important;
}
a.block.highlight-ancestor-1,
a.block.highlight-ancestor-1:hover,
a.block.highlight-ancestor-1:active,
a.block.highlight-ancestor-1:link,
a.block.highlight-ancestor-1:visited {
background: var(--info-color) !important;
color: var(--button-text) !important;
border-color: var(--info-color) !important;
text-decoration: none !important;
}
a.block.highlight-ancestor-2,
a.block.highlight-ancestor-2:hover,
a.block.highlight-ancestor-2:active,
a.block.highlight-ancestor-2:link,
a.block.highlight-ancestor-2:visited {
background: var(--warning-color) !important;
color: var(--button-text) !important;
border-color: var(--warning-color) !important;
text-decoration: none !important;
}
a.block.highlight-descendant-1,
a.block.highlight-descendant-1:hover,
a.block.highlight-descendant-1:active,
a.block.highlight-descendant-1:link,
a.block.highlight-descendant-1:visited {
background: var(--link-color) !important;
color: var(--button-text) !important;
border-color: var(--link-color) !important;
text-decoration: none !important;
}
a.block.highlight-descendant-2,
a.block.highlight-descendant-2:hover,
a.block.highlight-descendant-2:active,
a.block.highlight-descendant-2:link,
a.block.highlight-descendant-2:visited {
background: var(--error-color) !important;
color: var(--button-text) !important;
border-color: var(--error-color) !important;
text-decoration: none !important;
}
.connections-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.connection-path {
stroke: var(--border-accent);
stroke-width: 2;
fill: none;
opacity: 0.6;
transition: all 0.3s ease;
}
.connection-path.highlight-direct {
stroke: var(--success-color);
stroke-width: 3;
opacity: 1;
}
.connection-path.highlight-ancestor {
stroke: var(--info-color);
stroke-width: 3;
opacity: 1;
}
.connection-path.highlight-descendant {
stroke: var(--link-color);
stroke-width: 3;
opacity: 1;
}
@media (max-width: 768px) {
.diagram {
gap: 60px;
padding: 20px;
}
.column {
min-width: 185px;
}
a.block,
a.block:link,
a.block:visited {
padding: 4px 12px !important;
}
.epoch-header {
font-size: 16px;
padding: 10px 20px;
}
.diagram-container.option-2.expanded {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
border-radius: 0;
}
}