Digital Art Futures (DAF) is a Canadian not-for-profit arts and research organization dedicated to advancing digital, immersive and emerging artistic practices, connecting artists, ideas and communities across Canada and the world to explore and shape digital futures.
Projects
SADA is a post-colonial living archive of digital arts from South Asia, preserving creativity, memory & perspective as a third space where ideas grow.VXR is a travelling virtual and extended reality festival that shapes itself in dialogue with its host, drawing on local artists, institutions, and audiences, and carrying forward the works, relationships, and questions gathered along the way.
[id="L3482832595"].page {
min-height: var(--viewport-height);
}
[id="L3482832595"] .page-content {
align-items: flex-start;
border-width: 1.4rem;
}
/* =========================================
DIGITAL ART FUTURES
CIRCULAR PILLARS DIAGRAM
========================================= */
.daf-pillars-diagram {
width: calc(100% - 28px);
margin: 20px 14px;
padding: 45px;
border: 1px solid #000000;
background: #ffffff;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
/* =========================================
INTRODUCTION
========================================= */
.daf-diagram-intro {
max-width: 850px;
margin-bottom: 30px;
}
.daf-section-label {
margin-bottom: 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.daf-diagram-intro h2 {
margin: 0 0 25px 0;
font-size: clamp(50px, 7vw, 100px);
line-height: 0.88;
font-weight: 500;
letter-spacing: -5px;
}
.daf-diagram-intro p {
max-width: 700px;
margin: 0;
font-size: 19px;
line-height: 1.4;
}
/* =========================================
CIRCULAR DIAGRAM
========================================= */
.daf-circle {
position: relative;
width: min(850px, 90vw);
aspect-ratio: 1 / 1;
margin: 70px auto;
}
/* =========================================
CONNECTING LINES
========================================= */
.daf-line {
position: absolute;
background: #000000;
z-index: 1;
}
/* Vertical line */
.daf-line-vertical {
width: 1px;
height: 78%;
left: 50%;
top: 11%;
transform: translateX(-50%);
}
/* Horizontal line */
.daf-line-horizontal {
height: 1px;
width: 78%;
left: 11%;
top: 50%;
transform: translateY(-50%);
}
/* =========================================
CENTRE
========================================= */
.daf-centre {
position: absolute;
left: 50%;
top: 50%;
width: 170px;
height: 170px;
transform: translate(-50%, -50%);
border: 1px solid #000000;
border-radius: 50%;
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
z-index: 5;
}
.daf-centre span {
font-size: 48px;
line-height: 0.9;
font-weight: 600;
letter-spacing: -3px;
}
.daf-centre small {
margin-top: 12px;
max-width: 110px;
font-size: 11px;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* =========================================
PILLAR NODES
========================================= */
.daf-node {
position: absolute;
width: 270px;
min-height: 190px;
padding: 22px;
background: #ffffff;
border: 1px solid #000000;
box-sizing: border-box;
z-index: 4;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
/* NUMBER */
.daf-node-number {
font-size: 12px;
margin-bottom: 22px;
font-weight: 600;
letter-spacing: 0.5px;
}
/* TITLE */
.daf-node h3 {
margin: 0 0 12px 0;
font-size: 42px;
line-height: 0.9;
font-weight: 500;
letter-spacing: -3px;
}
/* DESCRIPTION */
.daf-node p {
margin: 0;
font-size: 14px;
line-height: 1.35;
}
/* =========================================
POSITIONING
========================================= */
/* ART — TOP */
.daf-art {
left: 50%;
top: 0;
transform: translateX(-50%);
}
/* TECHNOLOGY — RIGHT */
.daf-technology {
right: 0;
top: 50%;
transform: translateY(-50%);
}
/* RESEARCH — LEFT */
.daf-research {
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* FUTURES — BOTTOM */
.daf-futures {
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
/* =========================================
HOVER
========================================= */
.daf-node:hover {
background: #000000;
color: #ffffff;
}
/* =========================================
CONTACT
========================================= */
.daf-diagram-contact {
margin-top: 20px;
text-align: right;
}
.daf-diagram-contact a {
color: #000000;
text-decoration: none;
font-size: 26px;
font-weight: 500;
}
.daf-diagram-contact a:hover {
opacity: 0.5;
}
/* =========================================
TABLET
========================================= */
@media screen and (max-width: 950px) {
.daf-pillars-diagram {
padding: 30px;
}
.daf-circle {
width: min(720px, 90vw);
}
.daf-node {
width: 220px;
min-height: 170px;
padding: 18px;
}
.daf-node h3 {
font-size: 34px;
}
.daf-node p {
font-size: 13px;
}
.daf-centre {
width: 140px;
height: 140px;
}
.daf-centre span {
font-size: 40px;
}
}
/* =========================================
MOBILE
========================================= */
@media screen and (max-width: 650px) {
.daf-pillars-diagram {
width: calc(100% - 20px);
margin: 10px;
padding: 20px;
}
.daf-diagram-intro h2 {
font-size: 52px;
letter-spacing: -3px;
}
.daf-diagram-intro p {
font-size: 17px;
}
/* Turn circle into vertical sequence */
.daf-circle {
width: 100%;
height: auto;
aspect-ratio: auto;
margin: 50px 0;
display: flex;
flex-direction: column;
gap: 15px;
}
/* Hide desktop lines */
.daf-line {
display: none;
}
/* Centre becomes first element */
.daf-centre {
position: relative;
left: auto;
top: auto;
transform: none;
width: 120px;
height: 120px;
margin: 0 auto 25px auto;
}
.daf-centre span {
font-size: 34px;
}
/* Reset nodes */
.daf-node {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
transform: none;
width: 100%;
min-height: auto;
padding: 25px;
}
.daf-node h3 {
font-size: 48px;
}
.daf-node p {
max-width: 500px;
font-size: 16px;
}
.daf-diagram-contact {
text-align: left;
}
}
