/*
SXSW Stylesheet for RainFocus
Version 1.1
Last Updated May 15, 2026
*/
@layer reset, base, footer, rainfocus, utilities, demo_header;
/* ===========================
RESET LAYER
=========================== */
@layer reset {
:where(*, *::before, *::after) {
box-sizing: border-box;
margin: 0;
padding: 0;
vertical-align: baseline;
}
}
/* ===========================
BASE LAYER
=========================== */
@layer base {
@font-face {
font-family: "Founders-Text";
src: url(https://static.rainfocus.com/sxsw/sxsw27/static/staticfile/staticfile/foundersgrotesktext-400_1778881196123001AE3t.woff) format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Founders";
src: url(https://static.rainfocus.com/sxsw/sxsw27/static/staticfile/staticfile/FoundersGroteskWeb-Regular_1778881196545001Au1L.woff) format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Founders-Bold";
src: url(https://static.rainfocus.com/sxsw/sxsw27/static/staticfile/staticfile/foundersgrotesk-700_1778881195891001AVlQ.woff) format("woff");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Founders-Condensed";
src: url(https://static.rainfocus.com/sxsw/sxsw27/static/staticfile/staticfile/foundersgroteskcondensed-600_1778881196248001Ax74.woff) format("woff");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Founders-Mono";
src: url(https://static.rainfocus.com/sxsw/sxsw27/static/staticfile/staticfile/foundersgroteskmono-400_1778881196192001AcRz.woff) format("woff");
font-weight: 400;
font-style: normal;
}
:root {
/* Colors */
--color-glyph-primary: #000000;
--color-fill-primary: #FFFFFF;
--color-sx-very-light: #F4F4F4;
--color-sx-light: #F0F0F0;
--color-sx-medium: #707070;
--color-sx-dark: #202020;
--color-sx-very-dark: #0F1012;
--color-sx-blue: #19AFFF;
--color-sx-yellow: #FFC107;
--color-access-platinum: #2E2E2E;
--color-access-innovation: #E55714;
--color-access-ftv: #006BA8;
--color-access-music: #2EA34A;
--color-access-edu: #6E69FF;
--color-light-teal: #B6EDF1;
--color-bright-teal: #1CE8E3;
--color-bright-periwinkle: #6D69FE;
--color-light-green: #9BEAA8;
--color-gold-yellow: #F9CB0D;
--color-faded-black: #2F2F2F;
--color-cement: #EAEAEA;
--color-faded-teal: #339999;
--color-royal: #006CA8;
--color-putty: #F1B29C;
--color-peach: #FF9376;
--color-bright-orange: #EA5E19;
--color-faded-orange: #B76C51;
--color-red: #EF2D18;
--color-rose: #E8586D;
--color-pink: #F2A6D1;
--color-light-periwinkle: #9C99E8;
--color-faded-purple: #C68BAF;
--color-bright-citrus: #DEFC72;
--color-bright-green: #0BA03D;
--color-light-umber: #BD801F;
--color-tan: #B28E76;
--color-cool-taupe: #B49F90;
--color-faded-sage: #7E9791;
--color-link: var(--color-royal);
--color-accent: var(--color-light-green);
--color-font: var(--color-glyph-primary);
--color-black: var(--color-glyph-primary);
--color-white: var(--color-fill-primary);
/* Fonts */
--font-primary: "Founders", Helvetica, Arial, sans-serif;
--font-button: "Founders-Bold", Helvetica, Arial, sans-serif;
--font-body: "Founders-Text", Helvetica, Arial, sans-serif;
--font-headline: "Founders-Condensed", Helvetica, Arial, sans-serif;
--font-mono: "Founders-Mono", Courier, ui-monospace, monospace;
/* Space */
--rem-base: 16px;
--space-xs: 0.875rem;
--space-sm: 1.25rem;
--space-md: 2.5rem;
--space-lg: 3rem;
--space-xl: 5rem;
/* Other */
--border-radius: var(--rem-base);
--gap: var(--rem-base);
--gap-reduced: calc(var(--gap) / 2);
--gap-double: calc(var(--gap) * 2);
--border-radius-reduced: 0.5rem;
--animation-duration: 0.12s;
--pg-width: 1200px;
@media (min-width:1600px) {--pg-width: 1380px;}
@media (min-width:1800px) {--pg-width: 1440px;}
--icon-alert: url("data:image/svg+xml,%3Csvg width='20px' height='20px' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M10.7125,14.7125 C10.9042,14.5208 11,14.2833 11,14 C11,13.7167 10.9042,13.4792 10.7125,13.2875 C10.5208,13.0958 10.2833,13 10,13 C9.71667,13 9.47917,13.0958 9.2875,13.2875 C9.09583,13.4792 9,13.7167 9,14 C9,14.2833 9.09583,14.5208 9.2875,14.7125 C9.47917,14.9042 9.71667,15 10,15 C10.2833,15 10.5208,14.9042 10.7125,14.7125 Z M9,11 L11,11 L11,5 L9,5 L9,11 Z M10,20 C8.61667,20 7.31667,19.7375 6.1,19.2125 C4.88333,18.6875 3.825,17.975 2.925,17.075 C2.025,16.175 1.3125,15.1167 0.7875,13.9 C0.2625,12.6833 0,11.3833 0,10 C0,8.61667 0.2625,7.31667 0.7875,6.1 C1.3125,4.88333 2.025,3.825 2.925,2.925 C3.825,2.025 4.88333,1.3125 6.1,0.7875 C7.31667,0.2625 8.61667,0 10,0 C11.3833,0 12.6833,0.2625 13.9,0.7875 C15.1167,1.3125 16.175,2.025 17.075,2.925 C17.975,3.825 18.6875,4.88333 19.2125,6.1 C19.7375,7.31667 20,8.61667 20,10 C20,11.3833 19.7375,12.6833 19.2125,13.9 C18.6875,15.1167 17.975,16.175 17.075,17.075 C16.175,17.975 15.1167,18.6875 13.9,19.2125 C12.6833,19.7375 11.3833,20 10,20 Z M10,18 C12.2333,18 14.125,17.225 15.675,15.675 C17.225,14.125 18,12.2333 18,10 C18,7.76667 17.225,5.875 15.675,4.325 C14.125,2.775 12.2333,2 10,2 C7.76667,2 5.875,2.775 4.325,4.325 C2.775,5.875 2,7.76667 2,10 C2,12.2333 2.775,14.125 4.325,15.675 C5.875,17.225 7.76667,18 10,18 Z' fill='%23000000' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
--icon-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M0,14 L0,1.5 C0,1.0875 0.146875,0.734375 0.440625,0.440625 C0.734375,0.146875 1.0875,0 1.5,0 L8.5,0 C8.9125,0 9.265625,0.146875 9.559375,0.440625 C9.853125,0.734375 10,1.0875 10,1.5 L10,14 L5,12 L0,14 Z M1.5,11.7708333 L5,10.375 L8.5,11.7708333 L8.5,1.5 L1.5,1.5 L1.5,11.7708333 Z'/%3E%3C/svg%3E");
--icon-bookmark-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M0,14 L0,1.5 C0,1.08333333 0.145833333,0.729166667 0.4375,0.4375 C0.729166667,0.145833333 1.08333333,0 1.5,0 L8.5,0 C8.91666667,0 9.27083333,0.145833333 9.5625,0.4375 C9.85416667,0.729166667 10,1.08333333 10,1.5 L10,14 L5,12 L0,14 Z' fill='black'/%3E%3C/svg%3E");
--icon-chevron-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.0625 10'%3E%3Cpolygon points='5 10 0 5 5 0 6.0625 1.0625 2.125 5 6.0625 8.9375' fill='black'/%3E%3C/svg%3E");
--icon-chevron-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.0625 10'%3E%3Cpolygon points='1.0625 10 6.0625 5 1.0625 0 0 1.0625 3.9375 5 0 8.9375' fill='black'/%3E%3C/svg%3E");
--icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6.0625'%3E%3Cpolygon points='5 6.0625 0 1.0625 1.0625 0 5 3.9375 8.9375 0 10 1.0625' fill='black'/%3E%3C/svg%3E");
--icon-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M11.5,16 C10.8055556,16 10.2152778,15.7569444 9.72916667,15.2708333 C9.24305556,14.7847222 9,14.1944444 9,13.5 C9,13.375 9.02777778,13.1736111 9.08333333,12.8958333 L4.14583333,9.875 C3.92361111,10.0694444 3.67326389,10.2222222 3.39479167,10.3333333 C3.11645833,10.4444444 2.81819444,10.5 2.5,10.5 C1.80555556,10.5 1.21527778,10.2569444 0.729166667,9.77083333 C0.243055556,9.28472222 0,8.69444444 0,8 C0,7.30555556 0.243055556,6.71527778 0.729166667,6.22916667 C1.21527778,5.74305556 1.80555556,5.5 2.5,5.5 C2.81944444,5.5 3.11805556,5.55555556 3.39583333,5.66666667 C3.67361111,5.77777778 3.92361111,5.93055556 4.14583333,6.125 L9.08333333,3.10416667 C9.05555556,3.00694444 9.03472222,2.91104167 9.02083333,2.81645833 C9.00694444,2.721875 9,2.61638889 9,2.5 C9,1.80555556 9.24305556,1.21527778 9.72916667,0.729166667 C10.2152778,0.243055556 10.8055556,0 11.5,0 C12.1944444,0 12.7847222,0.243055556 13.2708333,0.729166667 C13.7569444,1.21527778 14,1.80555556 14,2.5 C14,3.19444444 13.7569444,3.78472222 13.2708333,4.27083333 C12.7847222,4.75694444 12.1944444,5 11.5,5 C11.1805556,5 10.8819444,4.94444444 10.6041667,4.83333333 C10.3263889,4.72222222 10.0763889,4.56944444 9.85416667,4.375 L4.91666667,7.39583333 C4.94444444,7.49305556 4.96527778,7.58895833 4.97916667,7.68354167 C4.99305556,7.778125 5,7.88361111 5,8 C5,8.11638889 4.99305556,8.221875 4.97916667,8.31645833 C4.96527778,8.41104167 4.94444444,8.50694444 4.91666667,8.60416667 L9.85416667,11.625 C10.0763889,11.4305556 10.3267361,11.2777778 10.6052083,11.1666667 C10.8835417,11.0555556 11.1818056,11 11.5,11 C12.1944444,11 12.7847222,11.2430556 13.2708333,11.7291667 C13.7569444,12.2152778 14,12.8055556 14,13.5 C14,14.1944444 13.7569444,14.7847222 13.2708333,15.2708333 C12.7847222,15.7569444 12.1944444,16 11.5,16 Z' fill='black'/%3E%3C/svg%3E");
--icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolygon points='4.25 5.75 0 5.75 0 4.25 4.25 4.25 4.25 0 5.75 0 5.75 4.25 10 4.25 10 5.75 5.75 5.75 5.75 10 4.25 10' fill='black'/%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7.72916667'%3E%3Cpolygon points='3.33333333 7.72916667 0 4.39583333 1.0625 3.33333333 3.33333333 5.60416667 8.9375 0 10 1.0625' fill='black'/%3E%3C/svg%3E");
--icon-calendar-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M1.5,16 C1.0875,16 0.734375,15.8506944 0.440625,15.5520833 C0.146875,15.2534722 0,14.9027778 0,14.5 L0,3.5 C0,3.09722222 0.146875,2.74652778 0.440625,2.44791667 C0.734375,2.14930556 1.0875,2 1.5,2 L3,2 L3,0 L4.5,0 L4.5,2 L9.5,2 L9.5,0 L11,0 L11,2 L12.5,2 C12.9125,2 13.265625,2.14930556 13.559375,2.44791667 C13.853125,2.74652778 14,3.09722222 14,3.5 L14,14.5 C14,14.9027778 13.853125,15.2534722 13.559375,15.5520833 C13.265625,15.8506944 12.9125,16 12.5,16 L1.5,16 Z M1.5,14.5 L12.5,14.5 L12.5,7 L1.5,7 L1.5,14.5 Z' fill='black'/%3E%3C/svg%3E");
--icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M1.5,16 C1.0875,16 0.734375,15.8506944 0.440625,15.5520833 C0.146875,15.2534722 0,14.9027778 0,14.5 L0,3.5 C0,3.09722222 0.146875,2.74652778 0.440625,2.44791667 C0.734375,2.14930556 1.0875,2 1.5,2 L3,2 L3,0 L4.5,0 L4.5,2 L9.5,2 L9.5,0 L11,0 L11,2 L12.5,2 C12.9125,2 13.265625,2.14930556 13.559375,2.44791667 C13.853125,2.74652778 14,3.09722222 14,3.5 L14,14.5 C14,14.9027778 13.853125,15.2534722 13.559375,15.5520833 C13.265625,15.8506944 12.9125,16 12.5,16 L1.5,16 Z M1.5,14.5 L12.5,14.5 L12.5,7 L1.5,7 L1.5,14.5 Z M1.5,5.5 L12.5,5.5 L12.5,3.5 L1.5,3.5 L1.5,5.5 Z' fill='black'/%3E%3C/svg%3E");
--icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.7916667,11.5416667 L11.8541667,10.4791667 L8.75,7.375 L8.75,3 L7.25,3 L7.25,8 L10.7916667,11.5416667 Z M8,16 C6.8975,16 5.86145833,15.7916667 4.891875,15.375 C3.92229167,14.9583333 3.07291667,14.3854167 2.34375,13.65625 C1.61458333,12.9270833 1.04166667,12.0766667 0.625,11.105 C0.208333333,10.1333333 0,9.09513889 0,7.99041667 C0,6.88569444 0.208333333,5.84722222 0.625,4.875 C1.04166667,3.90277778 1.61458333,3.05555556 2.34375,2.33333333 C3.07291667,1.61111111 3.92333333,1.04166667 4.895,0.625 C5.86666667,0.208333333 6.90486111,0 8.00958333,0 C9.11430556,0 10.1528472,0.21 11.1252083,0.63 C12.0974306,1.05 12.9431944,1.62 13.6625,2.34 C14.3816667,3.06 14.9510417,3.90666667 15.370625,4.88 C15.7902083,5.85333333 16,6.89333333 16,8 C16,9.1025 15.7916667,10.1385417 15.375,11.108125 C14.9583333,12.0777083 14.3888889,12.9270833 13.6666667,13.65625 C12.9444444,14.3854167 12.0963194,14.9583333 11.1222917,15.375 C10.1482639,15.7916667 9.1075,16 8,16 Z M8.01,14.5 C9.80819444,14.5 11.3394444,13.8645833 12.60375,12.59375 C13.8679167,11.3229167 14.5,9.78833333 14.5,7.99 C14.5,6.19180556 13.8679167,4.66055556 12.60375,3.39625 C11.3394444,2.13208333 9.80819444,1.5 8.01,1.5 C6.21166667,1.5 4.67708333,2.13208333 3.40625,3.39625 C2.13541667,4.66055556 1.5,6.19180556 1.5,7.99 C1.5,9.78833333 2.13541667,11.3229167 3.40625,12.59375 C4.67708333,13.8645833 6.21166667,14.5 8.01,14.5 Z' fill='black'/%3E%3C/svg%3E");
--icon-location: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16'%3E%3Cpath d='M7.5625,7.5625 C7.85416667,7.27083333 8,6.91666667 8,6.5 C8,6.08333333 7.85416667,5.72916667 7.5625,5.4375 C7.27083333,5.14583333 6.91666667,5 6.5,5 C6.08333333,5 5.72916667,5.14583333 5.4375,5.4375 C5.14583333,5.72916667 5,6.08333333 5,6.5 C5,6.91666667 5.14583333,7.27083333 5.4375,7.5625 C5.72916667,7.85416667 6.08333333,8 6.5,8 C6.91666667,8 7.27083333,7.85416667 7.5625,7.5625 Z M6.5,14.0208333 C8.15277778,12.5347222 9.39930556,11.1666667 10.2395833,9.91666667 C11.0798611,8.66666667 11.5,7.54861111 11.5,6.5625 C11.5,5.10416667 11.0243056,3.89583333 10.0729167,2.9375 C9.12152778,1.97916667 7.93055556,1.5 6.5,1.5 C5.06944444,1.5 3.87847222,1.97916667 2.92708333,2.9375 C1.97569444,3.89583333 1.5,5.10416667 1.5,6.5625 C1.5,7.54861111 1.92013889,8.66666667 2.76041667,9.91666667 C3.60069444,11.1666667 4.84722222,12.5347222 6.5,14.0208333 Z M6.5,16 C4.31944444,14.1805556 2.69097222,12.4895833 1.61458333,10.9270833 C0.538194444,9.36458333 0,7.90972222 0,6.5625 C0,4.70138889 0.618055556,3.14236111 1.85416667,1.88541667 C3.09027778,0.628472222 4.63888889,0 6.5,0 C8.34722222,0 9.89236111,0.628472222 11.1354167,1.88541667 C12.3784722,3.14236111 13,4.70138889 13,6.5625 C13,7.90972222 12.4652778,9.36111111 11.3958333,10.9166667 C10.3263889,12.4722222 8.69444444,14.1666667 6.5,16 Z' fill='black'/%3E%3C/svg%3E");
--icon-arrow-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpolygon points='1.0625 11 0 9.9375 8.4375 1.5 1 1.5 1 0 11 0 11 10 9.5 10 9.5 2.5625' fill='black'/%3E%3C/svg%3E");
--icon-star: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 13.78 13.07' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.225,10.75 L6.89,9.17 L9.58,10.75 L8.87,7.75 L11.18,5.77 L8.12,5.5 L6.89,2.65 L5.66,5.5 L2.6,5.77 L4.93,7.75 L4.225,10.75 Z M6.89,10.92 L3.475,12.96 C3.32,13.04 3.17,13.08 3.03,13.06 C2.88,13.05 2.75,13 2.64,12.92 C2.53,12.83 2.45,12.72 2.39,12.57 C2.34,12.43 2.33,12.28 2.37,12.125 L3.27,8.31 L0.25,5.75 C0.12,5.64 0.04,5.51 0.02,5.36 C-0.01,5.22 -0.004,5.08 0.04,4.94 C0.08,4.8 0.16,4.68 0.27,4.59 C0.38,4.5 0.52,4.45 0.68,4.44 L4.64,4.08 L6.2,0.46 C6.27,0.31 6.37,0.19 6.5,0.11 C6.62,0.04 6.75,0 6.89,0 C7.03,0 7.16,0.04 7.29,0.11 C7.41,0.19 7.51,0.31 7.58,0.46 L9.14,4.1 L13.1,4.44 C13.27,4.45 13.41,4.51 13.52,4.6 C13.63,4.7 13.7,4.82 13.75,4.96 C13.79,5.1 13.79,5.24 13.76,5.38 C13.72,5.51 13.64,5.64 13.52,5.75 L10.52,8.31 L11.41,12.125 C11.45,12.28 11.45,12.43 11.39,12.57 C11.34,12.72 11.25,12.83 11.14,12.92 C11.03,13 10.9,13.05 10.76,13.06 C10.61,13.08 10.46,13.04 10.31,12.96 L6.89,10.92 Z' fill='%23000'/%3E%3C/svg%3E");
--icon-star-fill: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 13.78 13.07' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.89,10.92 L3.475,12.96 C3.32,13.04 3.17,13.08 3.03,13.06 C2.88,13.05 2.75,13 2.64,12.92 C2.53,12.83 2.45,12.72 2.39,12.57 C2.34,12.43 2.33,12.28 2.37,12.125 L3.27,8.31 L0.25,5.75 C0.12,5.64 0.04,5.51 0.02,5.36 C-0.01,5.22 -0.004,5.08 0.04,4.94 C0.08,4.8 0.16,4.68 0.27,4.59 C0.38,4.5 0.52,4.45 0.68,4.44 L4.64,4.08 L6.2,0.46 C6.27,0.31 6.37,0.19 6.5,0.11 C6.62,0.04 6.75,0 6.89,0 C7.03,0 7.16,0.04 7.29,0.11 C7.41,0.19 7.51,0.31 7.58,0.46 L9.14,4.1 L13.1,4.44 C13.27,4.45 13.41,4.51 13.52,4.6 C13.63,4.7 13.7,4.82 13.75,4.96 C13.79,5.1 13.79,5.24 13.76,5.38 C13.72,5.51 13.64,5.64 13.52,5.75 L10.52,8.31 L11.41,12.125 C11.45,12.28 11.45,12.43 11.39,12.57 C11.34,12.72 11.25,12.83 11.14,12.92 C11.03,13 10.9,13.05 10.76,13.06 C10.61,13.08 10.46,13.04 10.31,12.96 L6.89,10.92 Z' fill='%23000'/%3E%3C/svg%3E");
}
::selection {
background: var(--color-bright-citrus);
color: var(--color-glyph-primary);
}
html {
font-size: var(--rem-base);
font: var(--font-primary);
scroll-behavior: smooth;
scrollbar-width: thin;
text-rendering: optimizeLegibility;
touch-action: manipulation;
-webkit-text-size-adjust: 100%;
-webkit-touch-callout: none;
width: 100%;
}
body {
background: var(--color-fill-primary);
color: var(--color-glyph-primary);
font-family: var(--font-body);
padding: 0;
font-size: 1.125rem;
line-height: 1.4;
overflow-x: hidden;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
word-break: break-word;
min-height: 100dvh;
width: 100dvw;
display: flex;
flex-flow: column nowrap;
> article {
width:100%;
max-width: var(--pg-width);
margin: 0 auto;
padding: 0;
}
}
:where(a, button, input[type="submit"], input[type="reset"], input[type="button"]) {
border: none;
box-shadow: none;
color: inherit;
cursor: pointer;
display: inline-block;
font-style: inherit;
margin: 0;
outline: 0;
-webkit-tap-highlight-color: var(--color-accent);
}
:where(button, input[type="submit"], input[type="reset"], input[type="button"]):disabled {
cursor: not-allowed;
opacity: 0.5;
}
[hidden] {display: none;}
[disabled] {cursor: not-allowed;}
/* Links */
a {
color: inherit;
text-decoration: underline;
&:hover,
&:focus,
&:active {
color: var(--color-glyph-primary);
text-decoration-line: underline;
text-decoration-style: dotted;
}
&:focus {
outline: 4px solid var(--color-accent);
}
/* Links that look like Pill-shaped Buttons */
&.button {
font-family: var(--font-button) !important;
text-transform: uppercase;
color: var(--color-white) !important;
background: var(--color-black) !important;
border-radius: 5rem !important;
padding: 0.5rem 1rem !important;
width: fit-content;
text-decoration:none;
font-size: 0.875rem !important;
line-height:1 !important;
position: relative;
transition: all 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
@media (min-width:768px) {
font-size: 1.125rem !important;
padding: 0.75rem 1.25rem !important;
}
&:hover {
background: var(--color-faded-black);
text-decoration: none;
}
&:focus {
outline: 4px solid var(--color-accent);
}
&:active {
top: 1px;
background: var(--color-black);
outline: none;
}
}
}
/* Buttons */
button,
a.button {
/* icons for buttons */
&.icon {
display: inline-flex;
gap: var(--gap-reduced);
align-items: center;
&.icon::before,
&.icon::after {
content: "";
display: none;
width: 10px;
height: 14px;
background-color: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
&:not(.after)::before {
display: inline-block;
}
&.after::after {
display: inline-block;
}
&.down {
&::before, &::after {
mask-image: var(--icon-chevron-down);
-webkit-mask-image: var(--icon-chevron-down);
height:6px;
}
}
&.favorite {
&::before, &::after {
mask-image: var(--icon-bookmark);
-webkit-mask-image: var(--icon-bookmark);
}
/* Toggled State (Filled) */
&.checked {
background: var(--color-gold-yellow);
color: var(--color-black);
&::before, &::after {
mask-image: var(--icon-bookmark-fill);
-webkit-mask-image: var(--icon-bookmark-fill);
}
}
}
&.star {
&::before, &::after {
mask-image: var(--icon-star);
-webkit-mask-image: var(--icon-star);
background: var(--color-white);
}
/* Toggled State (Filled) */
&.checked {
&::before, &::after {
mask-image: var(--icon-star-fill);
-webkit-mask-image: var(--icon-star-fill);
background: var(--color-gold-yellow);
}
}
}
&.settings {
&::before, &::after {
mask-image: var(--icon-settings);
-webkit-mask-image: var(--icon-settings);
}
}
&.arrow-out {
&::before, &::after {
mask-image: var(--icon-arrow-out);
-webkit-mask-image: var(--icon-arrow-out);
height:10px;
}
}
&.share {
&::before {
width: 12px;
height: 14px;
mask-image: var(--icon-share);
-webkit-mask-image: var(--icon-share);
}
&::after {
display:none;
width: fit-content;
content: "Share";
color:var(--color-white);
background:none;
line-height: 14px;
@media (min-width:640px) {
display:inline-flex;
}
}
}
&.reserve {
&::before, &::after {
width: 12px;
height: 12px;
mask-image: var(--icon-plus);
-webkit-mask-image: var(--icon-plus);
}
/* Toggled State (Filled) */
&.checked {
background: var(--color-pink);
color: var(--color-black);
&::before, &::after {
width: 12px;
height: 9px;
mask-image: var(--icon-check);
-webkit-mask-image: var(--icon-check);
transform: scale(1.3);
transform-origin: center;
}
}
}
&.check {
&::before, &::after {
width: 12px;
height: 9px;
mask-image: var(--icon-check);
-webkit-mask-image: var(--icon-check);
}
}
}
}
/* Button details */
button,
input[type="submit"],
input[type="reset"] {
background: var(--color-secondary);
border: 1px solid var(--color-tertiary);
border-radius: 3rem;
font-size: 1rem;
padding: 0.1rem 0.4rem;
}
button {
font-weight: 600;
line-height: var(--rem-base);
padding: .5rem .875rem;
font-family: var(--font-button);
text-transform: uppercase;
color: var(--color-white);
background: var(--color-black);
border-radius: 5rem;
padding: 0.65rem 1rem;
width: fit-content;
text-decoration:none;
font-size: 0.875rem;
position: relative;
transition: all 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
&:hover {
background: var(--color-faded-black);
text-decoration: none;
}
&:focus {
outline: 4px solid var(--color-accent);
}
&:active {
top: 1px;
background: var(--color-black);
outline: none;
}
&.icon {
display: inline-flex;
gap: var(--gap-reduced);
align-items: center;
}
&.icon::before,
&.icon::after {
content: "";
display: none;
width: 10px;
height: 14px;
background-color: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
}
&:not(.after)::before {
display: inline-block;
}
&.after::after {
display: inline-block;
}
@media (min-width:768px) {
font-size: 1.125rem;
padding: 0.75rem 1.25rem;
}
}
/* Correction for touch devices */
button, a, .button {
-webkit-tap-highlight-color: transparent;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-headline) !important;
font-style: normal;
font-weight: 600;
letter-spacing: -0.01em;
text-wrap: pretty;
}
h1 {
font-size: 40px !important; line-height: 1.1 !important;
@media (min-width:768px) {font-size: 48px !important; line-height: 1.1 !important;}
@media (min-width:1024px) {font-size: 56px !important; line-height: 1.05 !important;}
@media (min-width:1600px) {font-size: 64px !important;}
}
h2 {
font-size: 32px !important; line-height: 1.125 !important;
@media (min-width:768px) {font-size: 40px !important; line-height: 1.1 !important;}
@media (min-width:1024px) {font-size: 48px !important; line-height: 1.05 !important;}
}
h3 {
font-size: 28px !important; line-height: 1.135 !important;
@media (min-width:768px) {font-size: 32px !important; line-height: 1.12 !important;}
@media (min-width:1024px) {font-size: 40px !important; line-height: 1.1 !important;}
}
h4 {
font-size: 24px !important; line-height: 1.18 !important;
@media (min-width:768px) {font-size: 28px !important; line-height: 1.42 !important;}
@media (min-width:1024px) {font-size: 32px !important; line-height: 1.12 !important;}
}
h5 {
font-size: 21px !important; line-height: 1.1 !important;
@media (min-width:768px) {}
@media (min-width:1024px) {}
}
h6 {
font-size: 19px !important; line-height: 1.21 !important;
@media (min-width:768px) {}
@media (min-width:1024px) {}
}
h* + h* {
padding-top: 0.875rem;
}
/* Abbreviations with tooltip */
abbr {
position: relative;
border-bottom: 1px dotted;
cursor: default;
&:hover::after,
&:active::after {
background: var(--color-bg);
border-radius: var(--border-radius);
color: var(--color-primary);
content: attr(data-title);
display: flex;
font-size: 1rem;
left: 60%;
padding: 0.5rem 0.7rem;
position: absolute;
top: 90%;
width: 14rem;
z-index: 1;
}
}
address {
border: 3px dashed var(--color-tertiary);
border-radius: var(--border-radius);
font-size: 1.1rem;
padding: 0.5rem 1rem;
-webkit-user-select: all;
user-select: all;
width: 100%;
}
audio,
article,
aside,
header,
footer,
main,
section,
br,
canvas,
figure,
img,
picture,
video,
svg,
caption,
datalist,
del {
margin: 0;
}
/* Aside, blockquote heading */
aside,
blockquote {
> h1,
> h2,
> h3,
> h4,
> h5,
> h6 {
margin: 0;
padding: 0;
}
}
aside {
> h1,
> h2,
> h3,
> h4,
> h5,
> h6 {
text-wrap: balance;
}
}
/* SECTION */
section {
overflow-x: auto;
overflow-y: hidden;
max-width: var(--pg-width);
width: 100%;
position: relative;
margin:0 auto;
}
/* Strong, emphasis */
b,
strong,
q {
font-size: inherit;
font-weight: 600;
}
/* Blockquote */
blockquote {
background: var(--color-secondary);
border-radius: var(--border-radius);
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
padding: var(--space-sm) var(--space-xs);
}
/* Media elements */
canvas,
figure,
img,
picture,
video,
svg {
max-width: 100%;
}
/* Cite pill */
cite {
margin: 0;
font-size: 0.65rem;
font-style: normal;
position: relative;
top: -0.4rem;
a {
text-decoration: none;
color: inherit;
padding: 0 0.75rem;
background: var(--color-secondary);
border-radius: 3rem;
border: 1px solid var(--color-glyph-primary);
&:hover {
background: var(--color-primary);
}
}
}
/* Inline code */
code, samp {
display: inline-block;
margin: 0;
}
code {
background: var(--color-secondary);
border: 1px solid var(--color-tertiary);
border-radius: var(--border-radius);
font-size: 0.9rem;
padding: 0.1rem 0.4rem;
position: relative;
top: -0.1rem;
p & {
display: inline-block;
}
}
/* Deleted text */
del {
color: var(--color-red);
}
/* Details, Summary */
summary {
&::-webkit-details-marker {
display: none;
color: var(--color-secondary);
}
}
/* DETAILS */
details {
margin: 0;
padding: 0.5rem;
position: relative;
background: var(--color-secondary);
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
&:not(:first-of-type) {
margin: 0.25rem 0 0;
}
&:hover {
border: 1px solid var(--color-tertiary);
color: var(--color-accent);
background-color: var(--color-accent-10);
p {
color: var(--color-font);
}
}
summary {
font-weight: 600;
cursor: pointer;
display: block;
}
&[open] {
padding-bottom: 0.75rem;
summary {
padding-bottom: 0.25rem;
}
}
> :last-child {
margin-bottom: 0;
}
}
/* DFN */
dfn {
font-family: var(--font-secondary);
font-size: 1.2rem;
font-style: normal;
font-weight: 600;
text-transform: uppercase;
margin: 0;
}
/* DIALOG */
dialog {
background: var(--color-secondary);
color: var(--color-font);
border: 1px solid var(--color-tertiary);
border-radius: var(--border-radius);
box-shadow:
rgba(14, 63, 126, 0.06) 0 0 0 1px,
rgba(42, 51, 70, 0.03) 0 1px 1px -0.5px,
rgba(42, 51, 70, 0.04) 0 2px 2px -1px,
rgba(42, 51, 70, 0.04) 0 3px 3px -1.5px,
rgba(42, 51, 70, 0.03) 0 5px 5px -2.5px,
rgba(42, 51, 70, 0.03) 0 10px 10px -5px,
rgba(42, 51, 70, 0.03) 0 24px 24px -8px;
display: flex;
flex-flow: column nowrap;
padding: 1rem 1rem 3rem;
position: fixed;
margin: 0 auto;
opacity: 0;
top: 2rem;
transform: translateY(3rem);
transition:
opacity 0.2s ease-out,
transform 0.2s ease-in-out,
overlay 0.2s ease-out allow-discrete,
display 0.2s ease-out allow-discrete;
max-width: 640px;
width: 100%;
z-index: -1;
&[open] {
opacity: 1;
transform: translateY(2rem);
z-index: 1;
}
&::backdrop {
background-color: rgb(0 0 0 / 0%);
transition:
display 0.7s allow-discrete,
overlay 0.7s allow-discrete,
background-color 0.7s;
}
&[open]::backdrop {
background-color: rgb(0 0 0 / 45%);
backdrop-filter: blur(2px);
}
button#exit {
border-radius: var(--border-radius);
display: flex;
margin: 0 0 0 auto;
position: relative;
background: var(--color-primary);
&:hover {
background: var(--color-secondary);
}
&::before {
content: '×';
font-size: 1.4rem;
line-height: 1.2rem;
position: relative;
padding: 0 0.5rem 0 0;
top: 0.05rem;
}
}
h4 {
margin: 0 0 var(--space-xs);
}
}
/* DL, DT, DD */
dl {
margin: 0;
padding: 0;
display: grid;
gap: 0.125rem 0;
grid-template-columns: max-content;
dt,
dd {
padding: 0.125rem 0;
font-size: 1rem;
font-family: var(--font-mono);
text-transform: uppercase;
border-bottom: 1px solid var(--color-sx-medium);
}
}
dt {
color: var(--color-faded-black);
&::after {
content: ': ';
}
}
dd {
margin: 0;
padding: 0;
grid-column-start: 2;
text-align: right;
}
/* FIELDSET, FORMS */
fieldset {
legend {
display: flex;
background-color: var(--color-accent-10);
color: var(--color-accent);
width: 100%;
font-style: italic;
font-size: 0.8rem;
padding: 0.4rem 0 0.4rem 0.4rem;
margin: 0 0 1rem;
border: 1px solid var(--color-accent);
border-radius: var(--border-radius);
}
ul {
margin: 0;
padding: 0 0 0 1rem;
}
}
form {
margin: 0;
padding: 0 !important;
border: none !important;
border-radius: var(--border-radius);
text-align: left;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-start;
fieldset {
margin: 0;
width: 100%;
outline: none;
border: none;
> fieldset {
margin: 0;
> div {
width: 100%;
margin: 1rem 0 0;
}
}
label {
display: flex;
font-weight: 600;
margin-bottom: 0.25rem;
&:not(:first-of-type) {
margin-top: var(--space-xs);
}
}
}
> fieldset:not(:first-of-type) {
margin: 1rem 0 0;
}
select,
input[name="datalist"],
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
background: var(--color-secondary);
border: 1px solid var(--color-tertiary);
border-radius: 4px;
padding: 1px 2px;
font-size: 1.125rem;
min-width: 100%;
}
textarea {
min-height: var(--space-md);
}
input[type="radio"],
input[type="radio"] + label,
input[type="checkbox"],
input[type="checkbox"] + label {
display: inline-flex;
font-weight: normal;
}
input[type="submit"],
input[type="reset"] {
display: inline-flex;
margin: 0 0.5rem 0 0;
padding: 0.2rem 1rem;
}
br + label,
datalist + label,
select + label,
input[type="text"] + label,
input[type="email"] + label {
margin-top: var(--space-xs);
}
}
/* RANGE INPUT (WebKit) */
input[type="range"] {
background: #fff0;
border: none;
color: var(--color-accent);
font-size: 1.5rem;
position: relative;
overflow: hidden;
width: 100%;
--brightness-hover: 180%;
--brightness-down: 80%;
--clip-edges: 0.125em;
--thumb-height: 0.75em;
--track-color: var(--color-tertiary);
--track-height: 0.125em;
&:active {
cursor: grabbing;
}
&,
&::-webkit-slider-runnable-track,
&::-webkit-slider-thumb {
-webkit-appearance: none;
transition: all ease 100ms;
height: var(--thumb-height);
}
&::-webkit-slider-runnable-track,
&::-webkit-slider-thumb {
position: relative;
}
&::-webkit-slider-thumb {
--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
--clip-further: calc(100% + 1px);
--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
100vmax currentColor;
width: var(--thumb-width, var(--thumb-height));
background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
50% calc(var(--track-height) + 1px);
background-color: currentColor;
box-shadow: var(--box-fill);
border-radius: var(--thumb-width, var(--thumb-height));
filter: brightness(100%);
clip-path: polygon(
100% -1px,
var(--clip-edges) -1px,
0 var(--clip-top),
-100vmax var(--clip-top),
-100vmax var(--clip-bottom),
0 var(--clip-bottom),
var(--clip-edges) 100%,
var(--clip-further) var(--clip-further)
);
}
&:hover::-webkit-slider-thumb {
filter: brightness(var(--brightness-hover));
cursor: grab;
}
&:active::-webkit-slider-thumb {
filter: brightness(var(--brightness-down));
cursor: grabbing;
}
&::-webkit-slider-runnable-track {
background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
100% calc(var(--track-height) + 1px);
}
&:disabled::-webkit-slider-thumb {
cursor: not-allowed;
}
}
/* RANGE INPUT (Firefox) */
input[type="range"],
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
appearance: none;
transition: all ease 100ms;
height: var(--thumb-height);
}
input[type="range"] {
&::-moz-range-track,
&::-moz-range-thumb,
&::-moz-range-progress {
background: var(--color-accent);
}
&::-moz-range-thumb {
background: currentColor;
border: 0;
width: var(--thumb-width, var(--thumb-height));
border-radius: var(--thumb-width, var(--thumb-height));
cursor: grab;
}
&:active::-moz-range-thumb {
cursor: grabbing;
}
&::-moz-range-track {
width: 100%;
background: var(--track-color);
}
&::-moz-range-progress {
appearance: none;
background: currentColor;
transition-delay: 30ms;
}
&::-moz-range-track,
&::-moz-range-progress {
height: calc(var(--track-height) + 1px);
border-radius: var(--track-height);
}
&::-moz-range-thumb,
&::-moz-range-progress {
filter: brightness(100%);
}
&:hover::-moz-range-thumb,
&:hover::-moz-range-progress {
filter: brightness(var(--brightness-hover));
}
&:active::-moz-range-thumb,
&:active::-moz-range-progress {
filter: brightness(var(--brightness-down));
}
&:disabled::-moz-range-thumb {
cursor: not-allowed;
}
&:focus {
outline: none;
}
}
/* KBD */
kbd {
background: var(--color-tertiary);
padding: 0.1rem 0.4rem;
font-size: 0.95rem;
font-weight: 600;
border-radius: var(--border-radius);
}
/* HR */
hr {
height: 1px;
background: var(--color-tertiary);
}
/* FORM CONTROLS */
input,
textarea,
select {
font: inherit;
}
input,
select,
textarea {
background: var(--color-secondary);
border: 1px solid var(--color-tertiary);
border-radius: var(--border-radius);
box-shadow: none;
}
/* INS, LABEL, MARK, METER */
ins {
color: var(--color-bright-green);
font-size: 1.2rem;
font-style: italic;
font-weight: 600;
text-decoration: none;
}
label {
margin: 0;
font-size: 1rem;
}
mark {
background: var(--color-fill);
}
meter, figcaption {
margin: 0;
}
/* NAV */
nav {
margin: 0;
> a {
text-decoration: none;
display: inline-block;
&:hover {
text-decoration: underline;
}
&:not(:last-of-type)::after {
text-decoration: none;
}
&:hover::after {
text-decoration: none;
}
}
}
/* PRE, CODE */
pre {
display: flex;
margin: 0;
> code {
padding: 0.5rem;
display: inline-block;
overflow-x: auto;
top: 0;
-webkit-user-select: all;
user-select: all;
}
> code + button {
margin-left: 1rem;
}
}
/* LISTS */
ol,
ul {
padding: 0 0 0 1rem;
}
ol {
> li > ol {
list-style-type: lower-alpha;
> li > ol {
list-style-type: lower-roman;
}
}
}
/* INLINE TYPOGRAPHY */
q {
font-style: italic;
}
p {
font-size: 1.125rem;
text-wrap: pretty;
}
samp {
font-size: 1rem;
}
span {
margin: 0;
> a {
color: inherit;
&:hover {
color: inherit;
}
}
}
small {
font-size: 0.875rem;
}
sub {
position: relative;
bottom: -0.25rem;
}
sup {
position: relative;
top: -0.25rem;
}
/* PROGRESS */
progress {
height: 1.5rem;
margin: 0 0.5rem;
position: relative;
top: 0.4rem;
accent-color: var(--color-bg);
&:hover {
accent-color: var(--color-accent);
}
}
/* SELECT */
select {
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&::-ms-expand {
display: none;
}
}
/* TABLES */
table {
border-collapse: collapse;
border-spacing: 0;
white-space: nowrap;
width: 100%;
caption {
text-align: left;
font-size: 0.8rem;
padding: 0.5rem 1rem;
margin: 0 0 1rem;
font-style: italic;
background: var(--color-secondary);
border-left: 4px solid var(--color-tertiary);
width: fit-content;
}
td,
th {
padding: 0.25rem 1rem 0.25rem 0.25rem;
text-align: left;
vertical-align: top;
word-wrap: break-word;
}
thead,
tfoot {
border-bottom: 2px solid var(--color-tertiary);
}
tfoot {
font-size: 0.8rem;
td {
padding: var(--space-xs) 0;
}
}
tr {
border-bottom: 1px solid var(--color-tertiary);
&:nth-of-type(2n) {
background: var(--color-secondary);
}
th {
border-bottom: 2px solid var(--color-tertiary);
font-size: 1rem;
}
}
}
/* TEXTAREA */
textarea {
resize: vertical;
}
/* TIME */
time {
font-weight: 600;
text-decoration: underline;
font-size: 1.2rem;
}
}
/* ===========================
FOOTER LAYER
=========================== */
@layer footer {
/* FOOTER */
footer {
background: var(--color-black);
color: var(--color-white);
font-family: var(--font-body);
font-size:1.25rem;
a, a:link, a:visited {
color: var(--color-white) !important;
}
ul {
list-style: none;
}
.logo {
width: 268px;
height: 62px;
@media screen and (min-width: 768px) {
width: 280px;
height: 62px;
}
svg {
fill: var(--color-white);
}
}
section {
padding: var(--gap) !important;
max-width: var(--pg-width);
margin: 0 auto !important;
@media screen and (min-width: 1280px) {
padding: var(--gap) 0;
}
&.top {
padding: var(--gap) var(--gap) var(--space-md);
@media screen and (min-width: 768px) {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
padding: var(--gap) var(--gap) var(--space-xl);
}
@media screen and (min-width: 1280px) {
padding: var(--gap) 0 var(--space-xl);
}
div.all_links {
display: flex;
flex-flow:column nowrap;
gap: var(--gap);
gap: 0;
padding: var(--gap-double) 0 var(--gap);
@media screen and (min-width: 768px) {
display: flex;
flex-flow: row nowrap;
gap: var(--gap-double);
padding: 0 var(--gap);
}
@media screen and (min-width: 1024px) {
gap: var(--space-md);
margin: 0;
}
}
ul.links {
font-family: var(--font-primary);
margin: var(--gap) 0;
padding: 0;
@media screen and (min-width: 768px) {
margin: 0;
}
li a {
text-decoration: none;
font-size: 1.25rem;
color: var(--color-white);
&:hover {
text-decoration: underline;
}
@media screen and (min-width: 1028px) {
font-size: 1.25rem;
}
@media screen and (min-width: 1440px) {
font-size: 1.5rem;
color: var(--color-white) !important;
}
&[target="_blank"] {
display: inline-flex;
align-items: center;
gap: 0;
&::after {
content: "";
width: 10px;
height: 10px;
margin: 0.25rem 0 0 var(--gap-reduced);
display: inline-flex;
background-color: var(--color-sx-medium);
-webkit-mask-image: var(--icon-arrow-out);
mask-image: var(--icon-arrow-out);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
&:hover::after {
background-color: var(--color-white);
}
@media screen and (min-width: 1024px) {
gap: 0.25rem;
}
}
}
span {
font-family: var(--font-mono);
text-transform: uppercase;
color: var(--color-sx-medium);
font-size: 0.875rem;
display: flex;
margin: 0 0 var(--gap-reduced);
@media screen and (min-width: 768px) {
font-size: var(--rem-base);
}
}
}
}
}
.bottom {
background: var(--color-sx-very-dark);
small {
margin: 0 0 var(--gap);
display: flex;
max-width: 836px;
text-wrap: pretty;
font-size: 0.875rem;
}
ul {
display: flex;
flex-flow: row nowrap;
font-size: 0.875rem;
li {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
&:not(:last-of-type) {
margin: 0 var(--gap) 0 0 !important;
}
a {
text-decoration: none;
}
}
&.social_media_icons {
margin: 0 0 var(--gap);
padding: 0;
li a {
svg g,
svg path {
fill: var(--color-sx-medium);
}
&:hover svg g,
&:hover svg path {
fill: var(--color-white);
}
}
}
&.sosumi {
display: flex;
flex-flow: row wrap;
padding: 0;
li a {
color: var(--color-white) !important;
text-decoration: underline;
&:hover {
text-decoration-line: underline;
text-decoration-style: dotted;
}
}
}
}
}
}
}
/* ===========================
RainFocus LAYER
=========================== */
@layer rainfocus {
/* BODY > RF-specific class containers */
body {
p,
.rfComp-canvas * {
font-family: var(--font-body) !important;
}
.rfComp-canvas {
> div {
width: 100%;
}
}
.flex-box-section-full {
padding:0 !important;
}
.flex-box-section-full>.flex-box-section-full-interior {
padding:0 !important;
max-width:none !important;
}
.page-builder-display-reset {
background:none !important;
}
#rf-content {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
.special-div {
width:100%;
.cfp-page, .rfwf-full-panel {
background: white;
}
@media (min-width:1280px) {
.keep-bullets {
margin:0 1rem;
}
}
.rfwf-body-content {
max-width: var(--pg-width);
display: flex;
flex-flow:column nowrap;
gap: var(--gap);
flex-grow:1;
width: 100%;
position: relative;
margin:0 auto;
padding: var(--gap-double) var(--gap) 0;
@media (min-width:1280px) {
padding: var(--gap-double) 0 0;
}
@media (min-width:1400px) {
padding: var(--gap-double) 0 0;
}
form {
.mdBtnR-outline-primary .mdBtnR-text {
color: var(--color-white) !important;
}
.form-footer-actions .mdBtnR-container {
margin-left:0 !important;
}
.form-footer-actions {
button,
button#wf-btn-submit {
font-weight: 600 !important;
line-height: var(--rem-base) !important;
padding: .5rem .875rem !important;
font-family: var(--font-button) !important;
text-transform: uppercase !important;
color: var(--color-white) !important;
background: var(--color-black) !important;
border-radius: 5rem !important;
padding: 0.65rem 1rem !important;
width: fit-content !important;
text-decoration:none !important;
font-size: 0.875rem !important;
position: relative !important;
transition: all 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
&:hover {
background: var(--color-faded-black);
text-decoration: none;
}
&:focus {
outline: 4px solid var(--color-accent);
}
&:active {
top: 1px;
background: var(--color-black);
outline: none;
}
}
}
.wf-form-element-div .rf-radio-container .radio>label {
margin: 0 !important;
padding: 1rem !important;
}
}
/* The Back and SaveAndContinue Button Group */
.form-footer-actions {
display: flex;
flex-flow: row nowrap;
gap: var(--gap-reduced);
width:100%;
justify-content: center;
button#wf-btn-cancel {
background:var(--color-sx-light);
color: var(--color-glyph-primary);
}
button#wf-btn-cancel:hover {
background:var(--color-cement);
}
/* accounting for special Preview button */
div.preview {
display:flex;
flex-grow:1;
align-items: flex-start;
}
}
/* can add an alert ribbon like this on any page */
div.alert {
background: rgba(25, 175, 255,0.1);
border: 1px solid var(--color-sx-blue);
border-width:1px !important;
border-radius:var(--border-radius-reduced) !important;
color: var(--color-glyph-primary) !important;
padding:0.5rem 1rem;
border-radius:var(--border-radius-reduced);
text-align: center;
width:100%;
opacity: 0;
animation-name: fadeInUp;
animation-duration: 0.6s;
animation-delay: 1.3s;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
animation-fill-mode: forwards;
small {
/* display: inline-flex; */
align-items: flex-start;
justify-content: center;
gap: var(--gap-reduced);
position:relative;
/* &::before {
content:'';
background-image: var(--icon-alert);
display: inline-block;
width: 1rem;
height: 1rem;
position: relative;
top: 3px;
margin:0 4px 0 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
} */
}
}
/* rainfocus name for progress meters */
#wf-temp_a1778712871492 {
.rf-text-container {
ol {
display: flex;
list-style: none;
padding: 0;
margin: 4rem 0 0.5rem;
gap: 4px;
width: 100%;
li {
height: 12px;
flex: 1;
background-color: var(--color-cement);
border-radius: 2px;
}
}
}
}
/* progress meters */
.progress-stepper {
display: flex;
list-style: none;
padding: 0;
margin: 4rem 0 0.5rem;
gap: 4px;
width: 100%;
}
.step {
height: 12px;
flex: 1;
background-color: var(--color-cement);
border-radius: 2px;
}
.step.complete {
background-color: var(--color-glyph-primary);
}
}
}
}
.cfp-page, .rfwf-full-panel {
background: var(--color-fill-primary) !important;
.rfwf-panel-interior {
padding:0;
}
}
&:has(#mydiv:popover-open) {
overflow: hidden;
}
}
/* Step 0: About Page */
body.sxsw-sxsw26-panelpickerconference-page-about,
body.sxsw-sxsw27-panelpickerconference-page-about {
.keep-bullets {
display: flex;
flex-flow: column nowrap;
gap: var(--gap-reduced);
padding:0 0 4rem;
h1 {
margin:2rem 0;
text-align: center;
@media (min-width:1280px) {
margin:4rem 0;
}
}
h1 + h2 {
margin-top:1rem;
}
p + :is(h1, h2, h3, h4, h5, h6) {
margin-top: 1rem;
}
h4 + p {
margin-top:0;
}
}
}
/* Step 0: Landing Page */
body.sxsw-sxsw27-panelpicker-page-landingpage,
body.sxsw-sxsw27-partner-programming-page-landingpage {
#rf-content {
background: linear-gradient(to bottom,
rgba(237, 234, 220, 0) 0%,
#E2C545 100%);
flex-grow: 1;
.rfwf-body-content {
max-width: unset;
padding-left:0;
padding-right:0;
.element-container div {
main {
display:flex;
flex-flow:column nowrap;
align-items: center;
gap: 0;
section.hero {
display: flex;
flex-flow: column nowrap;
gap: var(--gap-double);
padding: 0 var(--gap);
overflow-x: hidden;
@media (min-width:1280px) {
padding: 0;
}
hgroup {
text-align:center;
display:flex;
flex-flow:column nowrap;
align-items: center;
gap: var(--gap-reduced);
padding:0;
div.dates {
display:flex;
flex-flow: row wrap;
gap: var(--gap-reduced);
align-items: center;
justify-content: center;
margin: 0 0 var(--gap-double);
@media (min-width:768px) {
gap: var(--gap);
}
p {
span {
font-weight:600;
border-radius:4px;
padding:0 0.5rem 2px;
background:#B986E7;
color: var(--color-glyph-primary) !important;
}
&:last-of-type span {
background: #E2C545;
}
}
}
a.button {
margin:var(--gap-double) 0 0 !important;
}
}
.image-container {
display: flex;
justify-content: center;
align-items: flex-end;
overflow:visible;
height: 260px;
width:100%;
padding: 0 50px;
transform-origin: center bottom;
transform: scale(0.75);
@media (min-width:768px) {
transform: scale(1);
height: 300px;
}
& img {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 4px;
border: 0.5rem solid white;
position: relative;
margin: 0 -40px;
opacity: 0;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
transition: all 1.4s cubic-bezier(0.23, 1, 0.32, 1);
&:first-of-type {
transform: rotate(-10deg) translateY(50px);
z-index: 1;
animation-name: bloom-left;
animation-duration: 0.8s;
animation-delay: 0.3s;
}
&:nth-of-type(2) {
z-index: 2;
transform: translateY(20px);
animation-name: bloom-center;
animation-duration: 0.6s;
animation-delay: 0.2s;
}
&:last-of-type {
transform: rotate(10deg) translateY(50px);
z-index: 3;
animation-name: bloom-right;
animation-duration: 0.9s;
animation-delay: 0.7s;
}
&:hover {
filter: brightness(1.1);
top: -0.25rem;
margin-bottom: 0.25rem;
}
}
}
}
div.links {
display: flex;
flex-flow:row wrap;
align-items: center;
text-align: center;
justify-content: center;
gap: var(--gap);
width:100%;
padding: 3rem var(--gap) 4rem !important;
background:#ebebeb;
&.white {
background:white;
}
div.drop-links {
display: flex;
flex-flow:row wrap;
align-items: center;
text-align: center;
justify-content: center;
gap: var(--gap);
width:100%;
padding: var(--gap) var(--gap) 0;
a::after {
content: "";
display: inline-block;
width: 0.6rem;
height: 0.875rem;
background-image: var(--icon-chevron-next);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-left: 0.5rem !important;
}
}
}
}
}
}
}
}
/* Step 1: First Select Form */
body.sxsw-sxsw27-panelpickerconferenceedu-form-panelpickerselection,
body.sxsw-sxsw27-partner-programming-conference-or-edu-form-panelpickerselection {
.special-div {
max-width:768px;
}
.wf-form-element-div .rf-radio-container .radio>label {
padding:2.5rem 1rem !important;
}
.wf-form-element-div .rf-radio-container .radio>label {
display:flex !important;
padding: var(--gap) 0 !important;
}
.rfwf-body-content {
padding: var(--gap-double) var(--gap) 4rem;
@media (min-width:1280px) {
padding: var(--gap-double) 0 6rem;
}
@media (min-width:1400px) {}
form#myDynamicForm {
border:none !important;
display: flex;
flex-flow: column nowrap;
gap: var(--gap-double);
text-align: center;
align-items: center;
margin: 0 0 4rem;
@media (min-width: 768px) {
gap: 2rem;
margin: 0 0 2rem;
}
/* HERE!! Specific to unique ID for first group of radio fields */
#wf-1747059241992001Hhal {
width:100%;
display: flex;
flex-flow: column nowrap;
gap: var(--gap-double);
margin: 2rem 0 0 !important;
.rf-label {
max-width: 80%;
display: block;
margin: 0 auto;
}
:is(h1, h2, h3, h4, h5, h6),
span.label-text {
text-wrap: balance;
text-wrap: pretty;
}
.rf-flex-column {
display: flex;
justify-content: center;
gap: var(--gap);
margin: var(--gap-double) 0 0;
width: 100%;
align-items: stretch;
flex-flow: column nowrap;
@media (min-width: 768px) {
flex-flow: row nowrap;
padding: 0 var(--gap-double);
}
.radio {
display: flex;
flex: 1 1 100%;
@media (min-width: 768px) {
flex: 0 1 48%;
}
input[type="radio"] {
position: absolute;
opacity: 0;
}
label {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 5rem var(--gap-double) var(--gap-double);
border: 2px solid #ddd;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
background-color: #f9f9f9;
position: relative;
text-align: center;
box-sizing: border-box;
/* Large gap for the image, small gap for text elements */
&::before {
content: "";
display: block;
margin-bottom: 80px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* The Title */
span {
display: inline-flex;
line-height: 1.2;
margin: auto 0 2px;
font-size:1.5rem;
font-weight: 600;
color: var(--color-glyph-primary) !important;
font-family: var(--font-headline) !important;
}
/* The Extra String */
&::after {
display: block;
margin: 0;
font-size: 1rem;
line-height: 1.2;
}
/* SXSW Radio */
&[for*="opt-1747059241996001HH6k"] {
&::before {
width: 185px;
height: 42px;
background-image: url('data:image/svg+xml;utf8,');
}
&::after { content: "March 15-21, 2027"; }
@media (min-width: 768px) {
&::before {
margin:var(--gap-double) 0 0;
}
}
}
/* SXSW EDU Radio */
&[for*="opt-1747059241996002H1dj"] {
&::before {
width: 184px;
height: 91px;
position: relative;
top: var(--gap);
background-image: url('data:image/svg+xml;utf8,');
}
&::after { content: "March 13-16, 2027"; }
}
&:hover {
border-color: #bbb;
}
}
/* State Logic: No bolding, just colors */
&:has(input:checked) label {
border: 2px solid var(--color-sx-blue, #0000ff);
background-color: #f0f7ff; /* Light blue tint */
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
}
}
}
}
}
}
/* Step 2: Submit Proposal */
body[class*="panelpickerconference-cfpHome"],
body[class*="panelpickeredu-cfpHome"],
body[class*="partner-programming-conference-cfpHome"],
body[class*="partner-programming-edu-cfpHome"] {
.rf-text-container {
margin:0 0 var(--gap-double);
}
.rfG-row {
margin:1rem 0 var(--gap-double);
background: var(--color-sx-light);
border-radius: var(--border-radius);
padding:var(--gap-double) var(--gap);
gap: var(--gap);
text-align: center;
display: flex;
flex-flow:column nowrap;
justify-content: center;
align-items: center;
button {
border-radius: 3rem !important;
padding: 0.5rem 1rem !important;
}
}
/* this is the new class name */
.view_proposals {
margin:0 0 4rem;
/* remove this in production */
.rf-table-container {
margin: var(--gap) 0;
display: flex;
flex-flow:row wrap;
width:100%;
border:1px solid var(--color-sx-medium);
padding:var(--gap-reduced);
border-radius:4px;
}
}
h1 {
margin:2rem 0;
text-align: center;
@media (min-width:1280px) {
margin:4rem 0;
}
}
h2 + p {
margin: 1rem 0 0;
}
.rf-workflow .rfwf-panel-interior .workflow-form-render {
padding: 0 !important;
border:none !important;
}
}
/* Step 3: Session Organizer */
body.sxsw-sxsw27-panelpickerconference-form-organizer,
body.sxsw-sxsw27-panelpickeredu-form-organizer,
body.sxsw-sxsw27-partner-programming-conference-form-organizer,
body.sxsw-sxsw27-partner-programming-edu-form-organizer {
h1 {
margin: 2rem 0;
}
/* float the button group to the right */
& #rf-content {
& .special-div {
& .rfwf-body-content {
.form-footer-actions {
justify-content: flex-end;
}
}
}
}
/* carry-over of RF styles, delete these in production */
div#contact-info form div#wf-1746546037836001NnUx {
display:none;
}
.rf-select .select-dropdown-icon .rfSI {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 18px;
width: 18px;
max-height: 18px;
max-width: 18px;
svg {
max-width:18px;
}
}
form {
display:flex;
flex-flow:column nowrap;
gap: var(--gap-reduced);
padding: 0 0 4rem;
align-items: flex-end;
@media (min-width:1280px) {
padding: 0 0 6rem;
}
.rf-text-container {
p + p {
margin:var(--gap) 0 0;
}
}
ul {
margin: var(--gap) 0 0;
}
h2 {
margin: var(--gap) 0 0;
}
.wf-form-element-div {
width:100%;
}
input {
width:100%;
border:1px solid var(--color-sx-light);
border-radius:4px;
}
.wf-form-element-div .rf-checkbox-container .checkbox>label>input {
left: -12px !important;
top: 6px !important;
}
}
}
/* Step 4: Title and Attibutes */
body.sxsw-sxsw27-panelpickerconference-form-session,
body.sxsw-sxsw27-panelpickeredu-form-session,
body.sxsw-sxsw27-partner-programming-conference-form-session,
body.sxsw-sxsw27-partner-programming-edu-form-session {
h1 {
margin: 2rem 0;
}
h2 {
margin: var(--gap) 0 0 !important;
}
form {
display:flex;
flex-flow:column nowrap;
gap: var(--gap-reduced);
padding: 0 0 4rem;
align-items: flex-end;
@media (min-width:768px) {
#wf-1747068686984001GwrA {
.rf-label {
display:none !important;
}
.rfG-md-50 {
width: 30% !important;
}
.wf-form-element-div .rf-checkbox-container .checkbox>label>input {
left: 4px !important;
top: 4px !important;
}
}
}
@media (min-width:1280px) {
padding: 0 0 6rem;
}
.rf-text-container {
p + p {
margin:var(--gap) 0 0;
}
}
ul {
margin: var(--gap) 0 0;
}
h2 {
margin: var(--gap) 0 0;
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
width:100%;
border:1px solid var(--color-sx-light);
border-radius:4px;
padding: 6px 8px;
}
.wf-form-element-div {
width:100%;
/* Fancy radio inputs */
.rf-flex-column {
display: flex;
gap: var(--gap);
margin: var(--gap-double) 0;
width: 100%;
align-items: stretch;
flex-flow: column nowrap;
@media (min-width: 768px) {
flex-flow: row wrap;
justify-content: flex-start;
}
.radio {
display: flex;
flex: 1 1 100%;
@media (min-width: 768px) {
flex: 0 1 calc(50% - (var(--gap) / 2));
}
input[type="radio"] {
position: absolute;
opacity: 0;
}
label {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: var(--gap-reduced) var(--gap);
border: 2px solid #ddd;
border-radius: 8px;
cursor: pointer;
background-color: white;
transition: all 0.3s ease;
text-align: left;
box-sizing: border-box;
span {
font-weight: 600;
font-size: 1.1rem;
color: #111;
margin-bottom: 4px;
}
&::after {
content: "";
display: block;
font-size: 0.85rem;
color: #666;
line-height: 1.4;
}
&:hover {
background-color: #fcfcfc;
border-color: #bbb;
}
}
/* Selected state logic */
&:has(input:checked) label {
border-color: var(--color-sx-blue, #0000ff);
background-color: #f0f7ff;
span {
font-weight: 600;
}
}
}
}
.rf-flex-column {
margin:1rem 0 0;
}
}
/* level of expertise radio group */
#wf-1745852834874007HIyA {
.rf-radio-container {
.rf-label {display:none !important;}
.rf-flex-column {
margin-top:0 !important;
.radio {
&:nth-of-type(1) label::after { content: "Very basic information. Intended audience has zero to one (0-1) years of experience with regards to this topic."; }
&:nth-of-type(2) label::after { content: "More complicated information. Intended audience has two to four (2-4) years of experience with regards to this topic."; }
&:nth-of-type(3) label::after { content: "Expert level information. Intended audience has five plus (5+) years of experience with regards to this topic."; }
}
}
}
}
/* focus area radio group (only on EDU) */
#wf-1747068686991003Glwe {
.rf-radio-container {
.rf-label {display:none !important;}
.rf-flex-column {
margin-top:0 !important;
.radio {
&:nth-of-type(1) label::after { content: "Sessions that focus on issues impacting learning starting from birth, including child development, parenting and child care, best teaching practice for young learners, and beyond."; }
&:nth-of-type(2) label::after { content: "From primary to secondary education, these sessions focus on issues impacting the practice and administration in classrooms, as well as initiatives and work that impact learners of school age and adolescence."; }
&:nth-of-type(3) label::after { content: "Whether discussing issues impacting universities, community colleges, or non-traditional pathways, these sessions address post-secondary learning in all of its forms."; }
&:nth-of-type(4) label::after { content: "From workforce upskilling and re-training to innovative approaches to adult learning, these sessions focus on learning that happens once learners leave traditional levels of schooling."; }
&:nth-of-type(5) label::after { content: "For sessions and discussions on issues that span multiple levels of education or speak to initiatives that address pathways between education levels."; }
}
}
}
}
/* EDU topics */
#wf-1747068686984001GwrA {
.rf-radio-container {
.rf-label {display:none !important;}
}
}
} /* end of form */
#wf-formSession-title {
margin:0 0 var(--gap-double) !important;
.rf-input {
margin-bottom: 0 !important;
}
.rf-label {display:none !important;}
}
#wf-1746194215403001LLOD {
.rf-label {display:none !important;}
}
.wf-form-element-div {
margin: 0 0 var(--gap);
}
#mydiv {
text-align: center;
padding: 4rem 0 0;
inset: 0;
margin: auto;
max-width:100%;
width: fit-content;
height: fit-content;
background: white;
border:2px solid var(--color-cement);
border-radius: var(--border-radius);
transition:
opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
display 0.4s allow-discrete,
overlay 0.4s allow-discrete;
opacity: 0;
transform: scale(0.9) translateY(20px);
&:popover-open {
opacity: 1;
transform: scale(1) translateY(0);
}
@starting-style {
&:popover-open {
opacity: 0;
transform: scale(0.9) translateY(20px);
}
}
img {
max-width:800px;
width:100%;
}
/* 5. Backdrop Logic */
&::backdrop {
background-color: rgba(255, 255, 255, 0);
backdrop-filter: blur(0px);
pointer-events: auto;
transition:
background-color 0.4s ease,
backdrop-filter 0.4s ease,
display 0.4s allow-discrete,
overlay 0.4s allow-discrete;
}
&:popover-open::backdrop {
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(2px);
}
@starting-style {
&:popover-open::backdrop {
background-color: rgba(255, 255, 255, 0);
backdrop-filter: blur(0px);
}
}
}
}
/* format radio group CONF */
body[class*="panelpickerconference-form-session"] #wf-1745586694Y77f2bb1c4 {
.rf-radio-container {
.rf-label {display:none !important;}
.rf-flex-column {
margin-top:0 !important;
.radio {
/* Book Reading (60 min, 1-2 speakers) */
&:nth-of-type(1) label::after { content: "Sessions focusing on the launch of a new book (publication date of June 2025 or later), giving the author and audience a chance to explore the themes or motifs present in their work."; }
/* Core Conversation (60 min, 1-2 speakers) */
&:nth-of-type(2) label::after { content: "Sessions that blend presentation and group conversation. Speakers will guide participants through a lively discussion framed around specific topics or areas of interest."; }
/* Fireside Chat (60 min, 2 speakers) */
&:nth-of-type(3) label::after { content: "Conversation between two speakers (often a moderator and expert), discussing and dissecting a specific topic."; }
/* Meetup (60 min, 1-2 hosts) */
&:nth-of-type(4) label::after { content: "Bringing together attendees with similar interests to broaden their community in either a networking/mixer style or a campfire discussion. One or two hosts."; }
/* Panel (60 min, 3-4 speakers) */
&:nth-of-type(5) label::after { content: "Diverse discussion around a specific topic. Established episodic podcasts also accepted. Four speakers maximum (INCLUDING moderator), no exceptions."; }
/* Podcast (60 min, 1-4 speakers) */
&:nth-of-type(6) label::after { content: "Established episodic audio series around a given theme. Four speakers (including hosts) maximum."; }
/* Presentation (60 min, 1-2 speakers) */
&:nth-of-type(7) label::after { content: "One to two speakers offering a deep dive into more targeted topics. Visual presentations are often included."; }
/* Workshop (Length Varies, 1-2 speakers) */
&:nth-of-type(8) label::after { content: "Deep dive sessions with more hands-on learning activities and specific takeaways for professional growth and development."; }
}
}
}
}
/* format radio group Partner Programming CONF */
body[class*="partner-programming-conference-form-session"] #wf-1745586694Y77f2bb1c4 {
.rf-radio-container {
.rf-label {display:none !important;}
.rf-flex-column {
margin-top:0 !important;
.radio {
/* Core Conversation (60 min, 1-2 speakers) */
&:nth-of-type(1) label::after { content: "Sessions that blend presentation and group conversation. Speakers will guide participants through a lively discussion framed around specific topics or areas of interest."; }
/* Fireside Chat (60 min, 2 speakers) */
&:nth-of-type(2) label::after { content: "Conversation between two speakers (often a moderator and expert), discussing and dissecting a specific topic."; }
/* Panel (60 min, 3-4 speakers) */
&:nth-of-type(3) label::after { content: "Diverse discussion around a specific topic. Four speakers maximum (INCLUDING moderator), no exceptions."; }
/* Presentation (60 min, 1-2 speakers) */
&:nth-of-type(4) label::after { content: "One to two speakers offering a deep dive into more targeted topics. Visual presentations are often included."; }
}
}
}
}
/* format radio group Partner Programming EDU */
body[class*="partner-programming-edu-form-session"] #wf-1745586694Y77f2bb1c4 {
.rf-radio-container {
.rf-label {display:none !important;}
.rf-flex-column {
margin-top:0 !important;
.radio {
/* Fireside Chat (60 min, 2 speakers) */
&:nth-of-type(1) label::after { content: "An in-depth interview, conversation, or debate that spotlights thought leadership and insights on a particular topic or area of expertise, followed by audience Q&A."; }
/* Meetup (60 min, 1-2 hosts) */
&:nth-of-type(2) label::after { content: "A networking session where facilitators encourage connection and inspiration around similar interests, issue areas, or affinity groups in a relaxed setting. Please note this is NOT a presentation-based session format."; }
/* Panel (45 min, 3-4 speakers) */
&:nth-of-type(3) label::after { content: "A dynamic and diverse discussion offering multiple viewpoints on a particular topic, followed by audience Q&A."; }
/* Podcast (45 min, 2-4 speakers) */
&:nth-of-type(4) label::after { content: "For media organizations and existing podcasts, a conversation on topics across the education landscape, recorded in front of a live audience to be used as a future episode."; }
/* Show & Tell (30 min, 1-2 speakers) */
&:nth-of-type(5) label::after { content: "Hosted on the Show & Tell Stage in the SXSW EDU Expo, Show & Tell sessions allow partners to showcase products or services in a presentation or fireside chat setting."; }
/* Solo (20 min, 1 speaker) */
&:nth-of-type(6) label::after { content: "A short solo presentation highlighting new and emerging ideas, followed by audience Q&A."; }
/* Workshop (90 min, 1-3 speakers) */
&:nth-of-type(7) label::after { content: "An in-depth, instructional program with hands-on learning activities and specific takeaways."; }
}
}
}
}
/* topics radio group */
#wf-1745852834875001HTcd {
.rf-radio-container {
.rf-label {display:none !important;}
.rf-flex-column {
margin-top:0 !important;
.radio {
&:nth-of-type(1) label::after { content: "Strengthen community and client connections through innovative brand strategies and multi-channel marketing solutions."; }
&:nth-of-type(2) label::after { content: "Discover how climate tech, sustainable infrastructure, and conservation are shaping resilient cities and the future of our planet."; }
&:nth-of-type(3) label::after { content: "Unpack the rapidly evolving creator economy and discover the tools and tactics needed to succeed where culture meets commerce."; }
&:nth-of-type(4) label::after { content: "Explore the intersection of creativity and functionality, and discover the UI, UX, and strategic design layers defining our world."; }
&:nth-of-type(5) label::after { content: "A survival guide for the independent film & TV industry with practical insights on how to bring compelling stories to screen and navigate the ever changing world of Film & TV."; }
&:nth-of-type(6) label::after { content: "Explore how gaming is leading the next wave of multimedia evolution, blending immersive ecosystems, storytelling, and immersive tech to redefine the future of entertainment."; }
&:nth-of-type(7) label::after { content: "Discover how technology is redefining health, mental well-being, and patient outcomes."; }
&:nth-of-type(8) label::after { content: "Unpack the trends, culture, and lifestyle choices defining individual expression and modern world."; }
&:nth-of-type(9) label::after { content: "Connect with the people shaping music's future—artists, creators, industry professionals, and leaders exploring the ideas, technologies, and collaborations defining what's next."; }
&:nth-of-type(10) label::after { content: "Discover how technology and innovation are driving the next generation of athletic performance, fan engagement, and sports entertainment."; }
&:nth-of-type(11) label::after { content: "Step into early-stage innovation and discover the fundraising, scaling tactics, and investment strategies building the companies of tomorrow."; }
&:nth-of-type(12) label::after { content: "Unpack the breakthroughs in technology and artificial intelligence creating the next wave of transformation in an ever-evolving digital landscape."; }
&:nth-of-type(13) label::after { content: "Navigate the evolving job market and explore the DEIB strategies, workplace design innovations, and upskilling tactics shaping the future of work."; }
}
}
}
}
/* format radio group EDU */
body[class*="panelpickeredu-form-session"] #wf-1745586694Y77f2bb1c4 {
.rf-radio-container {
.rf-label {display:none !important;}
.rf-flex-column {
margin-top:0 !important;
.radio {
/* Fireside Chat (60 min, 2 speakers) */
&:nth-of-type(1) label::after { content: "An in-depth interview, conversation, or debate that spotlights thought leadership and insights on a particular topic or area of expertise, followed by audience Q&A."; }
/* Meet Up (60 min, 1-2 speakers) */
&:nth-of-type(2) label::after { content: "A networking session where facilitators encourage connection and inspiration around similar interests, issue areas, or affinity groups in a relaxed setting. Please note this is NOT a presentation-based session format."; }
/* Panel (45 min, 3-4 speakers) */
&:nth-of-type(3) label::after { content: "A dynamic and diverse discussion offering multiple viewpoints on a particular topic, followed by audience Q&A."; }
/* Performance (90 min, 1-4 speakers) */
&:nth-of-type(4) label::after { content: "A musical, theatrical, storytelling, dance, poetry, or other performance that includes a workshop or extended Q&A to reflect on the value of the performing arts as a vehicle for deeper learning and offer takeaways for the audience."; }
/* Podcast (45 min, 2-4 speakers) */
&:nth-of-type(5) label::after { content: "For media organizations and existing podcasts, a conversation on topics across the education landscape, recorded in front of a live audience to be used as a future episode."; }
/* Solo (20 min, 1 speaker) */
&:nth-of-type(6) label::after { content: "A short solo presentation highlighting new and emerging ideas, followed by audience Q&A."; }
/* Workshop (90 min, 1-3 speakers) */
&:nth-of-type(7) label::after { content: "An in-depth, instructional program with hands-on learning activities and specific takeaways."; }
}
}
}
}
/* topics radio group EDU */
body[class*="edu-form-session"] #wf-1745852834875001HTcd {
.rf-radio-container {
.rf-label {display:none !important;}
.rf-flex-column {
margin-top:0 !important;
.radio {
&:nth-of-type(1) label::after { content: "Exploring initiatives and programs that focus on special education, diverse learners and neurodiversity, and disabilities across the learning lifecycle including adaptive instructional strategies, assistive technology, universal design, and more"; }
&:nth-of-type(2) label::after { content: "Exploring arts-based pedagogies and cultural and creative practices including the performing and visual arts, arts integration, media creation, gaming, and media and entertainment initiatives as well as approaches to storytelling, branding, and world-building for teaching and learning"; }
&:nth-of-type(3) label::after { content: "Programs and projects focused on empowering and connecting communities in and out of the classroom by highlighting partnerships and work organized by community spaces and groups including libraries, museums, makerspaces, community centers, after-school and summer programs, informal learning programs, outdoor education initiatives, and more"; }
&:nth-of-type(4) label::after { content: "Addressing work championing equity, justice, belonging, diversity, and inclusion in education and beyond, including social and economic disparities, culturally responsive teaching, anti-racist practices, gender and LGBTQIA+ issues, restorative justice, and more to ensure equitable opportunities and outcomes for all"; }
&:nth-of-type(5) label::after { content: "Exploring development and implementation of educational technology including virtual tools, generative artificial intelligence, and data interoperability, with a focus on issues surrounding equitable access to and ethical use of technology and future-forward solutions for tech integration"; }
&:nth-of-type(6) label::after { content: "Furthering social emotional learning, whole-child education, and human flourishing including initiatives addressing mental and physical wellness, trauma-informed practices, digital wellbeing, sports and physical education, and health education with a focus on comprehensive wellbeing for educators, students, and families"; }
&:nth-of-type(7) label::after { content: "Programs exploring cross-cultural or international initiatives in education, including instructional approaches informed by different national contexts, international students and studying abroad, global business ventures, language learning and ESL/ELL instruction, program implementation across borders, issues impacting immigrant learners, cultural exchange, and more"; }
&:nth-of-type(8) label::after { content: "Groundbreaking insights spotlighting work in leadership development and institutional transformation with topics including organizational management, issues impacting administration, executive leadership and strategy, systemic implementation, cultivation of youth leadership, pathway creation across the education sector, and educator development and support"; }
&:nth-of-type(9) label::after { content: "Addressing education policy issues and legislative changes across local, regional, national, and international governance including funding, curriculum and assessment standards, student data use and privacy, school safety, and digital policies, as well as economic development, civic engagement and activism, and public-private partnerships"; }
&:nth-of-type(10) label::after { content: "Content focused on the business and funding of education, with topics including entrepreneurship, philanthropic and social impact ventures, marketing and branding strategies, corporate initiatives and partnerships, market trends and flow of capital, and business scalability and adaptability"; }
&:nth-of-type(11) label::after { content: "Content focused on instruction and pedagogy across the entire learning lifecycle with a focus on solution-oriented strategies, innovative teaching, learner agency, and child development, with topics including instructional best practices for all educational levels and evolving curricula, teacher and faculty support, the science of learning, creative pedagogies, and communities of practice"; }
&:nth-of-type(12) label::after { content: "Programs and new approaches to professional development, upskilling, microcredentialing, corporate learning, and talent development, including workforce revitalization, training, and career transitions, as well as initiatives for adult learners, traditional and non-degree pathways, and how the future of work will impact new generations of students"; }
}
}
}
}
/* Step 5: Community Voting */
body.sxsw-sxsw27-community-voting-sxsw-page-community-voting,
body.sxsw-sxsw27-community-voting-edu-page-community-voting{
.flex-box-section-full-interior {
margin:0 0 var(--gap-double);
.element-container {
.keep-bullets {
text-align:center;
}
}
}
.search-container {
display:flex;
flex-flow: row nowrap;
gap: var(--gap);
padding: var(--gap) 0;
nav.search-filters {
ul, li {
list-style: none;
padding:0;
margin:0;
button {
background:none;
border-radius:none;
padding:0;
margin:0;
color:var(--color-glyph-primary);
font-size:1rem;
text-transform: none;
}
}
}
main {
width:100%;
ul {
padding:var(--gap) 0;
width:100%;
li {
list-style:none;
padding:var(--gap-reduced) var(--gap) var(--gap);
border-radius: var(--border-radius-reduced);
margin:0 0 var(--gap-reduced);
background: var(--color-sx-very-light);
border: none;
width:100%;
.badge, button {
display:none;
}
.catalog-result-title {
padding: var(--gap-reduced) 0;
font-size: 1.25rem;
a {
font-weight:600;
}
}
.attribute-name {
font-weight:600;
}
}
}
}
}
#share-links svg path {
fill: var(--color-glyph-primary) !important;
}
}
/* Step 6: Application Detail */
body.sxsw-sxsw27-community-voting-sxsw-page-application-detail,
body.sxsw-sxsw27-community-voting-edu-page-application-detail {
.catalog-result-title-text {
margin:var(--gap) 0 var(--gap-double);
}
.session-details-group-two {
display: flex;
flex-flow: row nowrap;
gap: var(--gap);
position: relative;
.sd-section-sm {
order:-1;
min-width:320px;
top: var(--gap);
display:flex;
flex-flow:column nowrap;
gap: var(--gap-reduced);
@media (min-width:768px) {
position:sticky;
align-self:flex-start;
}
span.attribute-name {
font-weight:600;
display:block;
}
}
}
}
/* Step: Description and Takeaways */
body.sxsw-sxsw27-panelpickerconference-form-sessiondescriptions,
body.sxsw-sxsw27-panelpickeredu-form-sessiondescriptions,
body.sxsw-sxsw27-partner-programming-conference-form-sessiondescriptions,
body.sxsw-sxsw27-partner-programming-edu-form-sessiondescriptions {
.wf-form-element-div {
width: 100% !important;
}
}
/* Step: Resources */
body.sxsw-sxsw27-panelpickerconference-form-sessionresources,
body.sxsw-sxsw27-panelpickeredu-form-sessionresources,
body.sxsw-sxsw27-partner-programming-conference-form-sessionresources,
body.sxsw-sxsw27-partner-programming-edu-form-sessionresources {
.wf-form-element-div {
width: 100% !important;
}
.wf-form-element-div .rf-checkbox-container .checkbox>label {
padding-left:20px !important;
>input {
top: 6px !important;
}
}
}
/* Step: Proposed Speakers */
body.sxsw-sxsw27-panelpickerconference-participant .wf-form-element-div {
width: 100%;
}
body.sxsw-sxsw27-panelpickerconference-participant {
.participant-page {
padding: 0 var(--gap) !important;
}
}
body.sxsw-sxsw27-panelpickerconference-participant,
body.sxsw-sxsw27-panelpickeredu-participant,
body.sxsw-sxsw27-partner-programming-conference-participant,
body.sxsw-sxsw27-partner-programming-edu-participant {
#participantPage {
border: none !important;
padding: 0 !important;
.rfwf-panel-interior {
padding: 0 !important;
}
}
.wf-form-element-div{
width: 100%;
}
.rfwf-panel-interior {
ul {
li {
list-style: disc !important;
}
}
}
.rfwf-full-panel.participant-actions {
.rfwf-panel-interior {
padding: 0 var(--gap) !important;
display: flex;
flex-flow: row nowrap;
gap: var(--gap-reduced);
width: 100%;
justify-content: center;
/* Remove RF's default pull-right float */
.pull-right {
float: none !important;
}
/* Mirror the .form-footer-actions button styling from the form pages */
button {
font-weight: 600 !important;
line-height: var(--rem-base) !important;
font-family: var(--font-button) !important;
text-transform: uppercase !important;
color: var(--color-white) !important;
background: var(--color-black) !important;
border-radius: 5rem !important;
padding: 0.65rem 1rem !important;
width: fit-content !important;
text-decoration: none !important;
font-size: 0.875rem !important;
position: relative !important;
transition: all 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
&:hover {
background: var(--color-faded-black);
text-decoration: none;
}
&:focus {
outline: 4px solid var(--color-accent);
}
&:active {
top: 1px;
background: var(--color-black);
outline: none;
}
}
/* Hide the arrow icon (form pages don't have one) */
button[data-analytics-name="continue"] .rfSI {
display: none !important;
}
}
}
.mdBtnR {
font-family: var(--font-button) !important;
text-transform: uppercase;
color: var(--color-white) !important;
background: var(--color-black) !important;
border-radius: 5rem !important;
padding: 0.5rem 1rem !important;
width: fit-content;
text-decoration:none;
font-size: 0.875rem !important;
line-height:1 !important;
position: relative;
transition: all 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
span {
color: var(--color-white) !important;
}
}
.mdBtnR-outline-primary svg {
fill: var(--color-white) !important;
}
}
/* Step: Agreement */
body.sxsw-sxsw27-panelpickerconference-form-agreementformconference,
body.sxsw-sxsw27-panelpickeredu-form-agreementformconference,
body.sxsw-sxsw27-partner-programming-conference-form-agreementformconference,
body.sxsw-sxsw27-partner-programming-edu-form-agreementformconference {
.wf-form-element-div {
width: 100% !important;
}
}
body.sxsw-sxsw27-panelpickeredu-form-agreementformedu {
/* ensuring the progress meter is full width */
#wf-temp_a1779480291215 {
width: 100% !important;
}
.wf-form-element-div .rf-checkbox-container .checkbox>label {
padding-left:20px !important;
>input {
top: 6px !important;
}
}
}
/* Confirmation of successful application submission */
body.sxsw-sxsw27-panelpickeredu-cfpConfirmation,
body.sxsw-sxsw27-panelpickerconference-cfpConfirmation,
body.sxsw-sxsw27-partner-programming-conference-cfpConfirmation {
h1 > span {
font-family: inherit !important;
}
.confirm-check-mark {
margin-top:16px !important;
}
.confirmation-page {
margin:0 !important;
}
button.mdBtnR {
border-radius: 3rem !important;
padding: 0.5rem 1rem !important;
}
}
/* EDU Application */
body.sxsw-sxsw27-panelpickeredu-form-session {
.wf-form-element-div {
margin: 0 !important;
h4 {
margin-top:var(--gap) !important;
}
}
/* for TAGS */
.wf-form-element-div .rf-checkbox-container .checkbox>label {
padding-left: 20px !important;
>input {
top: 6px !important;
}
}
}
body.sxsw-sxsw27-panelpickerconference-form-agreementformconference,
body.sxsw-sxsw27-panelpickeredu-form-agreementformconference,
body.sxsw-sxsw27-partner-programming-conference-form-agreementformconference,
body.sxsw-sxsw27-partner-programming-edu-form-agreementformconference {
.wf-form-element-div .rf-checkbox-container .checkbox>label>input {
left: 6px !important;
top: 5px !important;
}
span a {
text-decoration: underline !important;
&:hover {
color: var(--color-sx-medium) !important;
}
}
form {
button#wf-btn-submit span::after {
color:var(--color-white) !important;
}
/* button#wf-btn-submit span {} */
/* .mdBtnR .mdBtnR-text {} */
}
}
/* Step: Community Voting */
body.sxsw-sxsw27-community-voting-sxsw-page-community-voting,
body.sxsw-sxsw27-community-voting-edu-page-community-voting {
.rf-input input {
padding: 0 70px 0 16px !important;
}
button.clear-search {
background: var(--color-sx-very-light) !important;
border-radius: 3rem !important;
padding: 0.3rem 1rem !important;
}
#filters-header {
font-size: 1.2rem !important;
}
.total-results-count {
margin: 0 auto 0 0 !important;
}
ul.search-results {
li {
border-radius: var(--border-radius-reduced) !important;
background: var(--color-sx-very-light) !important;
padding: var(--gap) !important;
.title-text {
font-family: var(--font-headline) !important;
}
.rf-attribute {
margin:var(--gap-reduced) 0 0 !important;
}
}
}
#share-links {
a {
height:40px !important;
width:40px !important;
svg {
width:28px !important;
height: 20px !important;
margin-right:0px !important;
}
&:nth-of-type(3) {
width: 28px !important;
}
}
}
}
/* Application Detail Page */
body.sxsw-sxsw27-community-voting-sxsw-page-community-voting,
body.sxsw-sxsw27-community-voting-edu-page-community-voting {
.session-details-container {
margin: var(--gap-double) 0 !important;
}
.session-title {
.title-text {
font-family: var(--font-headline) !important;
font-size:2rem !important;
margin:0 0 var(--gap) !important;
color: var(--color-glyph-primary) !important;
}
}
.session-details-back-to-catalog {
border:none !important;
}
.back-to-catalog-container {
margin:0 !important;
padding:var(--gap) !important;
}
.speakers-component {
h2 {
font-size: 1rem !important;
margin: var(--gap-double) 0 var(--gap) !important;
}
}
}
}
/* ===========================
DEMO HEADER LAYER
=========================== */
@layer demo_header {
/* HEADER for DEMO PURPOSES ONLY */
.rf-org-header-container header {
box-shadow:none !important;
nav a {
font-family: var(--font-body) !important;
font-weight: 400 !important;
}
a.primary-nav-action {
border-radius:3rem !important;
padding: 0.5rem 1rem !important;
}
}
header {
background: var(--color-white);
color: var(--color-glyph-primary);
width: 100%;
position: relative;
top: 0;
left: 0;
z-index: 1000;
padding: 1rem;
box-sizing: border-box;
section {
display: flex;
align-items: center;
justify-content: space-between;
&::after {
content: url("data:image/svg+xml,%3Csvg width='24px' height='18px' viewBox='0 0 14 9' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M0,9 L0,7.5 L14,7.5 L14,9 L0,9 Z M0,5.25 L0,3.75 L14,3.75 L14,5.25 L0,5.25 Z M0,1.5 L0,0 L14,0 L14,1.5 L0,1.5 Z' fill='%23000000'/%3E%3C/g%3E%3C/svg%3E");
display: inline-block;
width: 28px;
height: auto;
cursor: pointer;
@media (min-width: 768px) {
display: none;
}
}
& .logo-link {
flex: 0 0 auto;
display: inline-flex;
width: auto;
height: 24px;
svg {
width: 100%;
height:100%;
fill: var(--color-glyph-primary);
}
@media (min-width: 768px) {
width: auto;
height: 28px;
}
}
}
& nav {
display: none;
align-items: center;
justify-content: flex-end;
gap: var(--gap-double);
margin-left: auto;
@media (min-width: 768px) {
display: inline-flex;
}
& a {
font-size: 1rem;
font-weight: 600;
line-height: var(--rem-base);
color: var(--color-black);
/* &:hover, &:focus, &:active { */
&.button {
background: var(--color-sx-light);
color: var(--color-glyph-primary);
font-size: .875rem;
&:hover, &:focus, &:active {
background: var(--color-cement);
}
}
&:not(.cta-buy) {
display: none;
@media (min-width: 678px) {
display: inline-flex;
}
}
}
}
}
}
/* ===========================
UTILITIES LAYER (motion, media queries)
=========================== */
@layer utilities {
/* Dialog starting-style transitions */
@starting-style {
dialog[open] {
opacity: 0;
transform: translateY(3rem);
}
}
dialog {
@starting-style {
&[open]::backdrop {
background-color: rgb(0 0 0 / 0%);
}
}
}
/* Media Queries */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@media screen and (hover: hover) and (min-width: 480px) {
html {
font-size: var(--rem-base);
}
}
@media screen and (min-width: 768px) {
:root {
--space-lg: 3.5rem;
--space-md: 3rem;
--space-sm: 1.5rem;
}
/* h1 { font-size: 48px; line-height: 1.1; }
h2 { font-size: 40px; line-height: 1.1; }
h3 { font-size: 32px; line-height: 1.12; }
h4 { font-size: 28px; line-height: 1.42; } */
}
@media screen and (min-width: 1024px) {
:root {
--space-lg: 4rem;
--space-md: 3.5rem;
--space-sm: 2rem;
}
/* h1 { font-size: 56px; line-height: 1.05; }
h2 { font-size: 48px; line-height: 1.05; }
h3 { font-size: 40px; line-height: 1.1; }
h4 { font-size: 32px; line-height: 1.12; } */
}
@media screen and (min-width: 1280px) {}
@media screen and (min-width: 1600px) {}
}
/* KEYFRAMES. These need to live outside of a Layer */
@keyframes bloom-center {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(10px);
}
}
@keyframes bloom-left {
from {
opacity: 0;
transform: translateY(150%) translateX(20%) rotate(0deg);
}
to {
opacity: 1;
transform: translateY(40px) translateX(0) rotate(-10deg);
}
}
@keyframes bloom-right {
from {
opacity: 0;
transform: translateY(100%) translateX(-50%) rotate(0deg);
}
to {
opacity: 1;
transform: translateY(40px) translateX(0) rotate(10deg);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px); /* Starts slightly lower */
}
to {
opacity: 1;
transform: translateY(0); /* Ends at original position */
}
}