/* cyrillic-ext */ @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pacifico-5d558a9b64dc.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pacifico-c098412c5e7b.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pacifico-03748bafc435.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pacifico-b6ffea0e6183.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pacifico-06f43ef24c28.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/fraunces-f2197f685885.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/fraunces-1fba8b406f10.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/fraunces-63f1654d1edf.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap; src: url("../fonts/fraunces-daaf62e05ec0.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap; src: url("../fonts/fraunces-a435d12cea05.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap; src: url("../fonts/fraunces-de4b587b4c26.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("../fonts/a9222aab-bb42-40e8-89c5-50c96900e7c5.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("../fonts/52f32d11-f952-4c10-b98e-b1d35eef036b.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("../fonts/9d04f30b-4bf4-4afe-853c-936fc8d73071.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("../fonts/a9222aab-bb42-40e8-89c5-50c96900e7c5.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("../fonts/52f32d11-f952-4c10-b98e-b1d35eef036b.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("../fonts/9d04f30b-4bf4-4afe-853c-936fc8d73071.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 900; font-stretch: 100%; font-display: swap; src: url("../fonts/a9222aab-bb42-40e8-89c5-50c96900e7c5.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 900; font-stretch: 100%; font-display: swap; src: url("../fonts/52f32d11-f952-4c10-b98e-b1d35eef036b.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 900; font-stretch: 100%; font-display: swap; src: url("../fonts/9d04f30b-4bf4-4afe-853c-936fc8d73071.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../fonts/5a8222d7-f43f-426f-a0b8-04b80c0bdd8d.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../fonts/100da69c-73bd-46cd-88b7-69de5657871b.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../fonts/97c26112-183e-45af-8711-62460aba8f28.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../fonts/5a8222d7-f43f-426f-a0b8-04b80c0bdd8d.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../fonts/100da69c-73bd-46cd-88b7-69de5657871b.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../fonts/97c26112-183e-45af-8711-62460aba8f28.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../fonts/5a8222d7-f43f-426f-a0b8-04b80c0bdd8d.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../fonts/100da69c-73bd-46cd-88b7-69de5657871b.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../fonts/97c26112-183e-45af-8711-62460aba8f28.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("../fonts/5a8222d7-f43f-426f-a0b8-04b80c0bdd8d.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("../fonts/100da69c-73bd-46cd-88b7-69de5657871b.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("../fonts/97c26112-183e-45af-8711-62460aba8f28.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("../fonts/5a8222d7-f43f-426f-a0b8-04b80c0bdd8d.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("../fonts/100da69c-73bd-46cd-88b7-69de5657871b.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("../fonts/97c26112-183e-45af-8711-62460aba8f28.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-stretch: 100%; font-display: swap; src: url("../fonts/5a8222d7-f43f-426f-a0b8-04b80c0bdd8d.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-stretch: 100%; font-display: swap; src: url("../fonts/100da69c-73bd-46cd-88b7-69de5657871b.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-stretch: 100%; font-display: swap; src: url("../fonts/97c26112-183e-45af-8711-62460aba8f28.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/5b6a7f78-6521-4a50-b6ed-fcb7e323c51c.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/6089da30-bd7b-4708-899d-edeab7922fbb.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/063dee1a-268e-4de9-a756-abfb4a5d98b4.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/12f9ff4c-6ba9-49d3-8db8-3dd1a226166c.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/5b6a7f78-6521-4a50-b6ed-fcb7e323c51c.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/6089da30-bd7b-4708-899d-edeab7922fbb.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/063dee1a-268e-4de9-a756-abfb4a5d98b4.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/12f9ff4c-6ba9-49d3-8db8-3dd1a226166c.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/5b6a7f78-6521-4a50-b6ed-fcb7e323c51c.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/6089da30-bd7b-4708-899d-edeab7922fbb.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/063dee1a-268e-4de9-a756-abfb4a5d98b4.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/12f9ff4c-6ba9-49d3-8db8-3dd1a226166c.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/1f4187d6-9619-44b0-8d79-6e272296a573.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/35537c08-feae-41c2-9ddf-965372d10a0a.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/6eebcd56-15e1-4203-90c9-2e9f15711ce5.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fcb5659f-1060-407e-ae3e-5be1521c0b91.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Archivo: primary grotesk — bold italic for editorial headlines, regular/medium for UI + body. Instrument Serif: poetic accent serif for pull-quotes, captions, "info." style annotations. Caveat: handwritten notebook marks — captions, arrows-adjacent labels, margin notes. Used sparingly. */ :root{ --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; --font-hand: 'Caveat', cursive; } :root{ /* base neutrals — the site's home register is stark black/white, not soft neutrals */ --ink: #2A2523; --charcoal: #2a2523; --paper: #ffffff; --cream: #f2ead0; --beige: #e8ddc4; --line: rgba(13,12,11,0.14); --line-on-dark: rgba(255,255,255,0.18); /* accent palette — muted, natural, never neon (from brand palette source) */ --dusty-pink: #e39b8d; --burnt-orange: #e63101; --signal-red: #ff281e; --blush: #ffe6e3; --forest-green: #3a4e35; --ocean-blue: #376a7d; --deep-moss: #475b40; --deep-navy: #152b3a; /* semantic aliases */ --bg-page: var(--paper); --bg-inverse: var(--ink); --bg-editorial: var(--cream); --fg-primary: var(--ink); --fg-inverse: var(--paper); --fg-muted: rgba(42,37,35,0.55); --fg-muted-inverse: rgba(255,255,255,0.6); --accent-primary: var(--burnt-orange); --accent-secondary: var(--dusty-pink); --border-default: var(--line); --border-inverse: var(--line-on-dark); --focus-ring: var(--burnt-orange); /* discipline tags — each artistic sector gets one muted hue, cycling the accent set */ --tag-act: var(--burnt-orange); --tag-sing: var(--ocean-blue); --tag-produce: var(--deep-moss); --tag-film: var(--deep-navy); --tag-theatre: var(--dusty-pink); --tag-media: var(--forest-green); } :root{ --text-display-1: italic 900 clamp(56px, 9vw, 168px)/0.92 var(--font-display); --text-display-2: italic 800 clamp(40px, 6vw, 96px)/0.95 var(--font-display); --text-headline: 800 clamp(28px, 3.4vw, 48px)/1.05 var(--font-display); --text-title: 700 clamp(20px, 2vw, 28px)/1.2 var(--font-display); --text-body-lg: 400 20px/1.5 var(--font-body); --text-body: 400 16px/1.55 var(--font-body); --text-small: 500 13px/1.4 var(--font-body); --text-label: 700 12px/1.2 var(--font-body); --text-serif-quote: italic 400 clamp(24px, 2.6vw, 34px)/1.35 var(--font-serif); --text-hand: 600 22px/1.2 var(--font-hand); --tracking-label: 0.08em; --tracking-vertical: 0.12em; } :root{ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; --radius-none: 0px; --radius-sm: 2px; --radius-pill: 999px; --radius-circle: 50%; /* the brand uses hard corners almost everywhere; a pill/circle shows up only for the contact button, avatar/hello circle, and filter chips — never a "rounded card" */ --container-max: 1440px; --container-pad: 64px; --container-pad-mobile: 20px; } :root{ /* motion — slow, organic, never bouncy or flashy (per brief: breathing, floating paper, film) */ --ease-organic: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out-soft: cubic-bezier(0.45, 0, 0.2, 1); /* @kind other */ --duration-fast: 200ms; /* @kind other */ --duration-base: 500ms; /* @kind other */ --duration-slow: 900ms; /* @kind other */ --duration-scene: 1400ms; /* @kind other */ /* the real site uses flat color blocks, not shadows — reserve shadow for floating paper/photo elements (polaroids, tape scraps) */ --shadow-paper: 0 12px 28px rgba(13,12,11,0.14), 0 2px 6px rgba(13,12,11,0.08); --shadow-none: none; --border-hairline: 1px solid var(--border-default); --border-hairline-inverse: 1px solid var(--border-inverse); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--signal-red);color:var(--fg-primary);font:var(--text-body);font-family:var(--font-body)} a{color:var(--fg-primary);text-decoration:underline;text-underline-offset:3px} a:hover{color:var(--accent-primary)} /* Edge bleed. iOS and macOS rubber-band scrolling paints the CANVAS, not , and the canvas takes a single colour from . A two-stop gradient cannot serve both ends: the tile simply repeats, so the top overscroll showed the bottom colour and vice versa. Instead assets/js/edge-color.js keeps ONE variable in sync with whichever end of the page the reader is approaching, which is the only end that can rubber-band at that moment. */ html { /* Blush, not the footer red. Before JS runs the reader is necessarily at the TOP of the home page, which is blush; falling back to red meant Safari sampled red for its toolbars on every cold load and kept it. edge-color.js still swaps in the footer red once the reader is actually near the end. */ background-color: var(--ateth-edge-current, #FFE6E3); } /* Same colour on the body, so nothing white can show through beneath the last section on any browser or at any scroll position. */ body { background-color: var(--signal-red); } /* Belt and braces for the same problem. Colouring the canvas only works if the colour is already correct at the instant the rubber-band starts, which is a race we keep losing on a fast flick. Refusing the overscroll outright means the canvas is never exposed in the first place, so no colour can be wrong: the page simply stops at its two ends. Supported by Safari 16+ and Chrome; anywhere it is ignored, the canvas colour above still applies. */ html, body { overscroll-behavior-y: none; } body { min-height: 100svh; } /* ── Phone refinements ──────────────────────────────────────────────────── Two collisions the desktop layout never hits. Corrected here rather than in the components so the exported JSX stays byte-faithful to the design file. */ @media (max-width: 760px) { /* Hero: INSTAGRAM (pinned left), EMAIL ME (pinned right) and the centred descriptor all share one row 28px from the bottom. The descriptor is nowrap and ~200px wide, so below ~700px all three overlap. Lift it onto its own line above the two links. */ section[data-hero-stage] [data-hero-chrome] { font-size: 10px !important; letter-spacing: 0.06em !important; } section[data-hero-stage] span[data-hero-chrome] { bottom: 68px !important; } section[data-hero-stage] a[data-hero-chrome] { bottom: 24px !important; } section[data-hero-stage] a[data-hero-chrome][href^="https"] { left: 22px !important; } section[data-hero-stage] a[data-hero-chrome][href^="mailto"] { right: 22px !important; } } @media (max-width: 900px) { /* Contact: the fixed ATETH mark and menu dot live at top:26-28. Once the contact grid stacks, FULL NAME lands underneath them. Push the stack clear. */ .ateth-contact { padding-top: 64px !important; } } /* Home intro paragraph. The design file bakes canvas dimensions into it (width:740px; height:83px; max-width:640px), so on a narrow screen it stays 640px wide, overruns the viewport and is cut off by the section's overflow-x. Unconditional on purpose: viewport units and media queries resolve differently under the iOS dynamic toolbar, and this must never not apply. On desktop min() still yields 640px, so the design is unchanged there. */ section[data-marquee-stage] > div:not([data-marquee-row]) { padding-left: min(56px, 6vw) !important; padding-right: min(56px, 6vw) !important; box-sizing: border-box !important; max-width: 100% !important; } section[data-marquee-stage] > div:not([data-marquee-row]) > div:last-child { width: 100% !important; max-width: min(640px, 100%) !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } /* iOS compositing. While the hero is pinned, GSAP sets it to position:fixed and Safari promotes it to its own layer. The marquee section sits above it via z-index:4, but only content that is ITSELF composited actually paints above that layer on iOS: the two marquee rows carry a GSAP transform so they win, while the intro block (transform:none) is painted behind the hero and disappears. Promoting the intro block to its own layer restores it. Desktop browsers composite this correctly either way, so nothing changes there. */ section[data-marquee-stage] > div:not([data-marquee-row]) { position: relative !important; z-index: 1 !important; -webkit-transform: translateZ(0); transform: translateZ(0); } /* Pinned-hero backdrop. While the hero is pinned it is position:fixed with height:100svh -- the SMALL viewport, i.e. the height with Safari's toolbar showing. The moment the toolbar hides, the visible viewport grows to 100lvh and the difference (about 40px in portrait, more in landscape) exposes whatever sits behind the hero: the Home wrapper, which is --paper white. Painting the pin spacer blush puts the hero's own colour behind it for the whole pinned range, so the strip is never white. Layout is untouched, so the corner labels stay where the design puts them -- which switching the hero to 100lvh would not have preserved. */ .pin-spacer { background-color: var(--blush); } /* ── Notch / safe area ──────────────────────────────────────────────────── With viewport-fit=cover the layout now runs edge to edge, so full-bleed sections (the red footer, the hero) reach the physical edges of the screen in landscape instead of leaving the browser's blush letterbox bars. In exchange, content near an edge can slide under the notch, so every element that is pinned to a left or right edge gets the inset added back as margin. */ #root > div > span, section[data-hero-stage] a[data-hero-chrome][href^="https"] { margin-left: env(safe-area-inset-left, 0px); } #root > div > button, section[data-hero-stage] a[data-hero-chrome][href^="mailto"] { margin-right: env(safe-area-inset-right, 0px); } [data-selected-work] { padding-left: calc(56px + env(safe-area-inset-left, 0px)) !important; padding-right: calc(56px + env(safe-area-inset-right, 0px)) !important; } section[data-marquee-stage] > div:not([data-marquee-row]) { padding-left: calc(min(56px, 6vw) + env(safe-area-inset-left, 0px)) !important; padding-right: calc(min(56px, 6vw) + env(safe-area-inset-right, 0px)) !important; } footer[data-site-footer] { padding-left: calc(32px + env(safe-area-inset-left, 0px)) !important; padding-right: calc(32px + env(safe-area-inset-right, 0px)) !important; } /* ── Menu dot hover ─────────────────────────────────────────────────────── On hover the solid dot becomes a ring. The hole is punched with a mask rather than drawn with a border or an inner circle, so the ring keeps whatever colour the dot currently has (red on the light sections, cream over the red footer, blush while the menu is open) and the centre shows the real background behind it instead of a hard-coded fill. */ #root > div > button:hover, #root > div > button:focus-visible { -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 52%, #000 53%); mask-image: radial-gradient(circle closest-side, transparent 0 52%, #000 53%); } /* ── About page (v2) ────────────────────────────────────────────────────── The design file lays this page out for a wide canvas only. Three things do not survive a phone and are corrected here rather than in the component, so the exported JSX stays byte-faithful to the design. */ /* 1. Portrait + bio run as a two-column grid at every width. Stack them. */ @media (max-width: 900px) { section.ateth-about-bio, [data-ateth-about-bio] { grid-template-columns: 1fr !important; } } /* 2. The five skill circles are laid out nowrap with negative overlaps — about 500px of content that cannot fit a 390px screen. Rather than break the overlapping-discs idea, let the row scroll sideways on small screens and start from the left edge instead of centred. */ @media (max-width: 900px) { [data-ateth-skills] { justify-content: flex-start !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; } [data-ateth-skills]::-webkit-scrollbar { display: none; } [data-ateth-skills] > button { scroll-snap-align: center; } } /* 3. "Curious" / "by nature" are nowrap Pacifico at up to 15vw. They fit, but the negative side margins push them past the edge on narrow screens; the page already clips overflow-x, so pull them back inside. */ /* About header composition. Measured off the supplied artwork (frame 2140px wide). Scale solved from the headline -- 975 design units rendered at 1027px, so s = 1.0533 -- and checked against the red band's total height: predicted 510px, measured 511. Curious 902u -> 950px x 21..971 y 97..367 headline 975u -> 1027px x 548..1575 y 314..390 by nature 1122u -> 1182px x 953..2135 y 177..607 Everything is a percentage of the container width, so the composition keeps these proportions at any screen size and both phrases stay fully inside the frame -- on a phone as much as on a desktop. It spans 98.8% of the width, so it still reads edge to edge without being clipped. */ [data-ateth-about-head] { padding-top: clamp(40px, 8vw, 120px) !important; overflow: hidden; } [data-ateth-about-head] img:first-of-type { width: 44.40vw !important; max-width: none !important; margin-left: 0.98vw !important; margin-top: 4.53vw !important; } [data-ateth-about-head] img:nth-of-type(2) { width: 47.99vw !important; max-width: none !important; margin-left: 25.61vw !important; margin-right: 0 !important; margin-top: -2.46vw !important; } [data-ateth-about-head] img:last-of-type { width: 55.23vw !important; max-width: none !important; margin-left: 44.54vw !important; margin-right: 0 !important; margin-top: -9.93vw !important; } /* Entrance: each phrase travels in from its own side and stays put. Done in CSS rather than through the scroll engine on purpose -- the engine's reveals are scrubbed, so they run backwards as soon as the reader scrolls up, and these are meant to settle. The About page mounts fresh on each visit, so a plain keyframe run on mount fires exactly once. Deliberately NO fill-mode and no delay: with `backwards` the element would be parked off-screen until the animation actually starts, so anywhere animations are paused or disabled the phrases would simply never appear. Without it the resting position is the default and the motion is pure enhancement -- if it never runs, the composition is still correct. */ @keyframes atethEnterFromLeft { from { transform: translateX(-115%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes atethEnterFromRight { from { transform: translateX(115%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } [data-ateth-about-head] img:first-of-type { animation: atethEnterFromLeft 1150ms cubic-bezier(0.22, 1, 0.36, 1); } [data-ateth-about-head] img:last-of-type { animation: atethEnterFromRight 1150ms cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { [data-ateth-about-head] img:first-of-type, [data-ateth-about-head] img:last-of-type { animation: none; } } /* About bio row. Two corrections against the design: 1. The box now follows the photograph's own 706x1118 (0.6315) so the frame is shown whole. The inline style asks for aspect-ratio 167/188 (0.888), which had squared the crop off; the design's own 334x637 would have been tall but still trimmed the sides, and the supplied photograph is already a portrait. 2. The columns were 1fr / 0.72fr, which let the left column grow with the viewport while the image stayed capped at 334px -- so on a wide screen the image sat at the far left with a large void before the text. Sizing each column to its content and centring the pair keeps them together. */ [data-ateth-about-bio] { grid-template-columns: minmax(0, auto) minmax(0, 520px) !important; justify-content: center !important; gap: clamp(32px, 5vw, 72px) !important; } [data-ateth-about-bio] img { aspect-ratio: 706 / 1118 !important; width: clamp(232px, 26vw, 334px) !important; max-width: none !important; } @media (max-width: 900px) { /* Stacked: keep the pair centred as a group rather than flush left. */ [data-ateth-about-bio] { grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; } [data-ateth-about-bio] > div:last-child { max-width: 520px; } } /* -------------------------------------------------------------------------- Skills discs on phones (v2.4.7) The row is five discs laid out nowrap: one open at 230px plus four closed at 130px, less four ~38px overlaps -- roughly 600px of content that cannot fit a 390px screen. The open disc's text was therefore sliced off at the viewport edge and the remaining discs sat off-screen behind a scroll nobody sees. On phones the discs stop expanding and are sized in vw so all five always fit one centred row: 5 x 22vw less 4 x 5vw overlap = 90vw, plus 8px of padding a side. Labels turn horizontal (vertical type is unreadable at this size) and the selected skill's description is printed under the row where it has room. -------------------------------------------------------------------------- */ [data-ateth-skill-detail] { display: none; } @media (max-width: 760px) { [data-ateth-skills] { flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; overflow: visible !important; padding: 0 8px !important; } /* 21vw discs overlapping by 3vw: 5 x 21 - 4 x 3 = 93vw, still one row, but the covered strip drops from 5vw to 3vw -- narrow enough that a label centred on the disc is no longer painted over by its neighbour. */ [data-ateth-skills] > button { width: 21vw !important; height: 21vw !important; margin-left: -3vw !important; transition: background-color 260ms var(--ease-organic) !important; } [data-ateth-skills] > button:first-child { margin-left: 0 !important; } /* the in-disc description has nowhere to go at this size -- it moves below */ [data-ateth-skills] > button [data-skill-open] { display: none !important; } /* label always visible, set horizontally */ [data-ateth-skills] > button [data-skill-label] { opacity: 1 !important; } [data-ateth-skills] > button [data-skill-label] > span { writing-mode: horizontal-tb !important; transform: none !important; font-size: clamp(8px, 2.3vw, 12px) !important; line-height: 1.15; max-height: none !important; padding: 0; text-wrap: balance; } /* Inset the label box by the width of the overlap on BOTH sides. Symmetric, so the text stays centred on the disc, but it can no longer reach the strip a neighbouring disc paints over -- which was clipping the long two-line "Creative Direction". */ [data-ateth-skills] > button [data-skill-label] { padding: 0 3vw; } /* which disc is selected has to read at a glance now that it cannot grow */ /* Deliberately NOT raised above its neighbours: z-index runs 5-i, so a disc is only ever covered on its left. Lifting the selected one to the top made it cover the disc on its right and swallow that label instead. */ [data-ateth-skills] > button[aria-expanded="true"] { background: var(--ink, #14100f) !important; } /* the inline style still lifts the selected disc to z-index 6; pin the whole row back to a plain left-over-right order so selection never changes who covers whom */ [data-ateth-skills] > button:nth-child(1) { z-index: 5 !important; } [data-ateth-skills] > button:nth-child(2) { z-index: 4 !important; } [data-ateth-skills] > button:nth-child(3) { z-index: 3 !important; } [data-ateth-skills] > button:nth-child(4) { z-index: 2 !important; } [data-ateth-skills] > button:nth-child(5) { z-index: 1 !important; } [data-ateth-skill-detail] { display: block; margin: clamp(22px, 6vw, 34px) auto 0; max-width: 460px; padding: 0 24px; text-align: center; } [data-skill-detail-title] { display: block; font-family: 'Fraunces', var(--font-serif), Georgia, serif; font-weight: 600; font-size: clamp(19px, 5vw, 24px); color: var(--signal-red); margin-bottom: 8px; } [data-skill-detail-body] { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--ink); text-wrap: pretty; } } /* -------------------------------------------------------------------------- About: clearance under "by nature" on phones (v2.5.1) Measured on the live page: on desktop the red petal mark starts 71px below the bottom of the "by nature" artwork; at 390px that gap was -20px, i.e. the mark was overlapping the phrase. Two reasons -- the bio section only carries 24px of top padding at that width, and the mark keeps its fixed 132px size, which is 40% of the portrait on desktop but 57% of it on a phone. The mark is anchored to the top of the portrait (bottom: calc(100% - 48px)), so shrinking it lowers its top edge; the rest of the clearance comes from the section's padding. -------------------------------------------------------------------------- */ @media (max-width: 760px) { [data-ateth-about-bio] { padding-top: clamp(56px, 15vw, 72px) !important; } [data-ateth-about-bio] div[aria-hidden="true"] { width: clamp(80px, 25vw, 110px) !important; height: clamp(80px, 25vw, 110px) !important; } } /* -------------------------------------------------------------------------- About: clearance under the fixed nav on phones (v2.5.2) The header padding is clamp(40px, 8vw, 120px), so at 1440px "Curious" clears the ATETH wordmark by 135px but at 390px the clamp bottoms out at 40px and the gap collapses to 13px -- the script looks stuck to the nav. The wordmark and the menu dot are position: fixed and always end around y=45, so the clearance has to come from the section's own padding rather than from vw. -------------------------------------------------------------------------- */ @media (max-width: 760px) { [data-ateth-about-head] { padding-top: clamp(72px, 20vw, 96px) !important; } } /* -------------------------------------------------------------------------- Rule between Skills and Education (v2.5.3) The two sections only had whitespace between them, so on a phone -- where the skill description now sits as running text under the discs -- Education read as a continuation of it. An inset hairline, matched to the 760px content column the education entries already use, separates them without adding a heavy full-bleed border. -------------------------------------------------------------------------- */ [data-ateth-education] { position: relative; padding-top: clamp(52px, 7vw, 90px) !important; } [data-ateth-education]::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 2 * clamp(24px, 6vw, 96px))); height: 1px; background: var(--signal-red); opacity: 0.26; } /* -------------------------------------------------------------------------- Contact page edges (v2.5.6) Safari showed red above and below the dark contact page. Two causes, both fixed here rather than in JS: 1. body was hard-coded to --signal-red. The contact shell is min-height: 100svh, i.e. the viewport with the toolbar SHOWN; the moment the toolbar collapses the viewport grows and the red body is exposed underneath. The shell now uses 100lvh (the tallest state) and the body follows the page. 2. The canvas colour came from edge-color.js, which runs a frame or two after the swap, so arriving from a red page painted red first. app.js now stamps data-ateth-page on before paint and this rule does the rest. -------------------------------------------------------------------------- */ [data-ateth-contact-shell] { min-height: 100lvh !important; } html[data-ateth-page="contact"], html[data-ateth-page="contact"] body { background-color: #2A2523 !important; } /* -------------------------------------------------------------------------- Selected projects on phones (v2.7.0) The list is a three-column grid -- number | title | toggle -- and it kept those proportions at every width. On a 390px screen the number column ate its 120px minimum, the toggle took its own, and the description was left with roughly 250px: a ribbon two or three words wide running hundreds of pixels down the page, with a tall empty column beside it. On phones each project becomes a single-column card instead: the header is number + title + toggle on one line, and the body spans the full card width with the two empty spacer cells removed. -------------------------------------------------------------------------- */ @media (max-width: 760px) { [data-selected-work] { padding: 0 16px 90px !important; } /* the row rules become card outlines */ [data-work-list] { border-top: 0 !important; } [data-work-item] { border: 1px solid rgba(0,0,0,0.14) !important; border-radius: 14px; padding: 16px 16px !important; margin-bottom: 12px; background: var(--paper, #fff); } [data-work-head] { grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 12px !important; align-items: center !important; } [data-work-head] > :first-child { font-size: 26px !important; } [data-work-head] > :nth-child(2) { font-size: 17px !important; line-height: 1.3; text-wrap: balance; } [data-work-head] > :last-child { font-size: 28px !important; } /* full width for the description; drop the empty spacer cells */ [data-work-body] { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; } [data-work-body] > div:first-child, [data-work-body] > div:last-child { display: none !important; } [data-work-body] > div:only-child { display: block !important; } } /* -------------------------------------------------------------------------- Project image inside the card on phones (v2.7.1) The project shots only ever appeared in the cursor-following preview panel, which is driven by mouseenter/mousemove -- events a touch screen never sends, so on a phone the work was all text and no pictures. The card now carries the first shot of each project inline, under the credits. Hidden above 760px on purpose: there the hover preview already shows the images, and duplicating them in the row would break the list's typographic rhythm. -------------------------------------------------------------------------- */ [data-work-image] { display: none; } @media (max-width: 760px) { /* No forced aspect-ratio: the shots are a mix of landscape and portrait, and cropping them all to one box cut the framing the photographer chose. Each one keeps its own proportions and is shown whole. */ [data-work-image] { display: block; width: 100%; height: auto; border-radius: 10px; margin-top: 4px; background: var(--beige, #EFE7E1); } } /* -------------------------------------------------------------------------- Kill the cursor preview on touch (v2.7.3) The floating project preview is positioned by a gsap quickTo bound to mousemove, and that binding is deliberately skipped when the device reports (hover: none). But the panel's visibility is driven by hoverId, which is set from onMouseEnter -- and a tap DOES emit a synthetic mouseenter. So on a phone the panel became visible while nothing had ever moved it: it painted at its untransformed origin, top-left of the viewport, over the heading. The in-card image added in 2.7.1 already serves this purpose on phones, so the panel is simply removed where it cannot be driven. -------------------------------------------------------------------------- */ @media (hover: none), (max-width: 760px) { [data-work-preview] { display: none !important; } } /* -------------------------------------------------------------------------- Document structure (v3.0.0) The page had one heading on the home view and none at all on About or Contact: every section label was a styled div, and both headlines are SVG artwork. A screen reader had no outline to navigate, and a crawler saw no topic for either view. The labels are h2s now, and each view carries an h1 whose text matches the artwork -- hidden from sight, present in the document. -------------------------------------------------------------------------- */ .ateth-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* The headings carry their type in inline styles; only the browser's default margins need clearing so the spacing stays exactly as designed. */ #root h1, #root h2 { margin: 0; } /* -------------------------------------------------------------------------- Language switch in the menu (v3.1.0) Sits under ABOUT ME / CONTACT, deliberately small: it is a utility, not a third destination, and it must not compete with the two links above it. AR is dimmed rather than hidden or disabled -- it tells the reader an Arabic version is coming without offering a click that leads nowhere. It becomes a real link the moment /ar/ exists. -------------------------------------------------------------------------- */ [data-menu-lang] { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: clamp(28px, 4vh, 52px); font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; color: var(--blush); } [data-lang-current] { opacity: 1; } [data-lang-sep] { opacity: 0.4; font-weight: 400; } [data-lang-pending] { opacity: 0.42; cursor: default; } @media (max-width: 760px) { [data-menu-lang] { margin-top: clamp(22px, 3.5vh, 38px); font-size: 11px; } } /* ========================================================================== ARABIC (v3.2.0) Same application and the same animation engines -- only the modules that carry copy have a translated twin. Everything below is presentation. FONTS: the design calls for Nicole (display) and Rigot (script). Neither is a webfont we hold, so both are named FIRST in every stack and the page falls through to the closest free Arabic faces until the licensed files arrive. Adding the two files plus their @font-face is the only step left. ========================================================================== */ html[data-ateth-lang="ar"] { /* Every body string in the app is set to var(--font-body), which is Archivo. Archivo carries no Arabic glyphs, so the browser silently substituted its default serif for the bio, the education entries, the mission line and the footer -- which is why they came out in a face nobody chose. Redefining the variable on this tree fixes all of them at once, including any text added later. */ --font-body: 'IBM Plex Sans Arabic', system-ui, sans-serif; --font-display-ar: 'Nicole', 'Reem Kufi', 'Amiri', Georgia, serif; --font-script-ar: 'Rigot', 'Aref Ruqaa', 'Amiri', serif; --font-body-ar: 'IBM Plex Sans Arabic', system-ui, sans-serif; } html[data-ateth-lang="ar"] #root { direction: rtl; font-family: var(--font-body-ar); } /* The type is set inline in JS, so the swap keys off the declared family. */ html[data-ateth-lang="ar"] #root [style*="Fraunces"] { font-family: var(--font-display-ar) !important; } html[data-ateth-lang="ar"] #root [style*="Pacifico"] { font-family: var(--font-script-ar) !important; line-height: 1.5; } html[data-ateth-lang="ar"] #root [style*="font-body"], html[data-ateth-lang="ar"] #root p, html[data-ateth-lang="ar"] #root span, html[data-ateth-lang="ar"] #root div { font-family: var(--font-body-ar); } /* Arabic has no capitals: uppercase transforms do nothing here but the wide tracking meant for capitals pulls the joined letters apart. */ html[data-ateth-lang="ar"] #root * { text-transform: none !important; } html[data-ateth-lang="ar"] #root [style*="letter-spacing"] { letter-spacing: 0 !important; } /* Arabic ascenders and descenders need more room than the English setting. */ html[data-ateth-lang="ar"] #root [data-menu-item] { line-height: 1.35; } /* The language pair stays Latin -- AR and EN are the labels themselves. */ html[data-ateth-lang="ar"] [data-menu-lang] { direction: ltr; font-family: var(--font-body); } [data-lang-other] { opacity: 0.45; text-decoration: none; color: inherit; transition: opacity 250ms var(--ease-organic); } [data-lang-other]:hover, [data-lang-other]:focus-visible { opacity: 1; } /* -------------------------------------------------------------------------- Arabic headlines as live text (v3.2.3) The English headlines are SVG artwork: "Curious by nature", "The artist behind the work", "LET'S GET IN TOUCH". There is no Arabic artwork yet, so on the Arabic tree those three become real text set in the display faces and composed to the same rhythm -- offset script line, centred serif line, second script line pulled up and across. -------------------------------------------------------------------------- */ html[data-ateth-lang="ar"] [data-ateth-about-head] { overflow: hidden; } html[data-ateth-lang="ar"] [data-ar-script] { display: block; font-family: var(--font-script-ar); color: var(--signal-red); /* Arabic glyphs are much wider per character than the Latin script art, so the same vw would run off the page. Measured to keep both words on one line at 1440px and at 390px. */ font-size: clamp(44px, 8.6vw, 128px); line-height: 1.2; white-space: nowrap; padding: 0 clamp(16px, 3vw, 56px); } html[data-ateth-lang="ar"] [data-ar-script-2] { text-align: left; margin-top: -0.22em; } html[data-ateth-lang="ar"] [data-ar-serif] { display: block; position: relative; z-index: 3; font-family: var(--font-display-ar); font-weight: 700; color: var(--ink); font-size: clamp(20px, 3.6vw, 52px); line-height: 1.35; text-align: center; margin: -0.12em 0; } html[data-ateth-lang="ar"] [data-ar-contact-head] { display: block; font-family: var(--font-script-ar); color: var(--signal-red); font-size: clamp(56px, 9vw, 150px); line-height: 1.25; } html[data-ateth-lang="ar"] .ateth-contact-head { aspect-ratio: auto; display: flex; align-items: center; } @media (max-width: 760px) { html[data-ateth-lang="ar"] [data-ar-script] { font-size: clamp(34px, 11vw, 62px); padding: 0 10px; } html[data-ateth-lang="ar"] [data-ar-serif] { font-size: clamp(20px, 6.2vw, 34px); } } /* -------------------------------------------------------------------------- Arabic About headline artwork (v3.3.0) The supplied SVGs were exported on the full 1440x810 artboard, so their ink sat in the middle of a mostly empty box and could not be positioned. Each viewBox is now cropped to its measured glyph bounds: fudoli 790 x 297 (2.66:1) artist line 753 x 176 (4.28:1) bitabi 791 x 279 (2.84:1) Composition mirrors the English one: script line offset to one side, the serif line centred and overlapping, the second script line pulled up and thrown to the opposite side. Mirrored, because Arabic reads right to left -- so the first line hangs right where "Curious" hangs left. -------------------------------------------------------------------------- */ html[data-ateth-lang="ar"] [data-ateth-about-head] { padding: clamp(96px, 12vw, 150px) 0 clamp(40px, 6vw, 80px); overflow: hidden; } html[data-ateth-lang="ar"] [data-ateth-about-head] img { display: block; height: auto; max-width: none; } /* fudoli -- top right */ html[data-ateth-lang="ar"] [data-ateth-about-head] img:first-of-type { width: 32vw !important; margin-left: auto !important; margin-right: clamp(-10px, -0.8vw, -4px) !important; } /* the black line, centred and over the two script lines */ html[data-ateth-lang="ar"] [data-ar-artist-line] { position: relative; z-index: 3; width: 38vw !important; margin: -1.6vw auto 0 !important; } /* bitabi -- pulled up and thrown left */ html[data-ateth-lang="ar"] [data-ateth-about-head] img:last-of-type { width: 33vw !important; margin-left: clamp(-10px, -0.8vw, -4px) !important; margin-right: auto !important; margin-top: -2.2vw !important; } /* Same entrance as the English build, mirrored: each line arrives from the edge it settles against. */ html[data-ateth-lang="ar"] [data-ateth-about-head] img:first-of-type { animation: atethEnterFromRight 1150ms cubic-bezier(0.22, 1, 0.36, 1); } html[data-ateth-lang="ar"] [data-ateth-about-head] img:last-of-type { animation: atethEnterFromLeft 1150ms cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { html[data-ateth-lang="ar"] [data-ateth-about-head] img:first-of-type, html[data-ateth-lang="ar"] [data-ateth-about-head] img:last-of-type { animation: none; } } @media (max-width: 760px) { html[data-ateth-lang="ar"] [data-ateth-about-head] { padding-top: clamp(72px, 20vw, 96px) !important; } html[data-ateth-lang="ar"] [data-ateth-about-head] img:first-of-type { width: 52vw; } html[data-ateth-lang="ar"] [data-ar-artist-line] { width: 62vw; margin-top: -2.4vw; } html[data-ateth-lang="ar"] [data-ateth-about-head] img:last-of-type { width: 54vw; margin-top: -3.2vw; } } /* -------------------------------------------------------------------------- Arabic philosophy line (v3.4.0) Replaces the three-part text setting -- "Art is a" + italic "quiet dialogue" + the rest -- with the supplied artwork. Cropped from the 1440x810 artboard to its measured ink: 953 x 145, a 6.57:1 band, so it needs a much wider and shallower box than the English line it replaces. It keeps data-anim="heading", so it reveals on scroll exactly like the English headline did -- same trigger, same engine. -------------------------------------------------------------------------- */ html[data-ateth-lang="ar"] [data-ar-quote] { display: block; width: min(1100px, 82vw); height: auto; max-width: none; margin: 0 auto; } @media (max-width: 760px) { html[data-ateth-lang="ar"] [data-ar-quote] { width: 88vw; } } /* -------------------------------------------------------------------------- Arabic petal badge (v3.4.1) The English badge is built from four quarter-circle divs in a two-column grid. Under direction: rtl the grid reverses its column order, so the four quarters reassembled into a mirrored shape -- which is why it looked wrong in Arabic and correct in English. The supplied SVG has no such failure mode. The badge also swaps sides with the portrait: in English it hangs off the left of the picture; in Arabic the picture sits on the other side of the row, so the badge follows it. -------------------------------------------------------------------------- */ /* The bio row sizes ANY img inside it to the portrait's box with !important; the badge is also an img and was being stretched to 334x529 by that rule. */ html[data-ateth-lang="ar"] [data-ateth-about-bio] img[data-ar-petals] { display: block; width: 132px !important; height: auto !important; max-width: none !important; aspect-ratio: auto !important; object-fit: contain !important; filter: none !important; } @media (max-width: 760px) { html[data-ateth-lang="ar"] [data-ateth-about-bio] img[data-ar-petals] { width: clamp(80px, 25vw, 110px) !important; } } /* -------------------------------------------------------------------------- Arabic section label: the vision mark (v3.5.0) Replaces the word set in type with the supplied artwork. Cropped from the 1440x810 artboard to its ink: 166 x 140, very nearly square -- unlike the other supplied pieces, which are wide bands. It sits where the section label sat, so it is sized against that label rather than the headline: a mark, not a banner. Still an h2 carrying data-anim="heading", so the document outline and the scroll reveal are unchanged. -------------------------------------------------------------------------- */ html[data-ateth-lang="ar"] [data-ar-vision] { display: block; text-align: center; } html[data-ateth-lang="ar"] [data-ar-vision] img { display: block; height: 40px !important; width: auto !important; max-width: none !important; height: auto; max-width: none; margin: 0 auto; } @media (max-width: 760px) { html[data-ateth-lang="ar"] [data-ar-vision] img { height: 32px !important; width: auto !important; } } /* -------------------------------------------------------------------------- Arabic skills block (v3.6.0) Section mark supplied as artwork: 332 x 87 after cropping the 810 artboard, a 3.8:1 band, so it is sized on width like the other banner pieces. Type below it moves to IBM Plex Sans Arabic: bold for the talent name, regular for its description. The English build sets both in Fraunces, which the Arabic layer was mapping to the display face -- correct for headlines, wrong for a label and a paragraph that have to be read quickly. -------------------------------------------------------------------------- */ html[data-ateth-lang="ar"] #root [data-ar-skills-title] { display: block; text-align: center; } html[data-ateth-lang="ar"] #root [data-ar-skills-title] img { display: block; height: 40px !important; width: auto !important; max-width: none !important; height: auto; max-width: none; margin: 0 auto; } /* the name inside each disc */ html[data-ateth-lang="ar"] #root [data-ateth-skills] [data-skill-label] > span, html[data-ateth-lang="ar"] #root [data-ateth-skills] [data-skill-open] > span:first-child { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif !important; font-weight: 700 !important; } /* the name and the description under the row */ html[data-ateth-lang="ar"] #root [data-skill-detail-title] { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif !important; font-weight: 700 !important; } html[data-ateth-lang="ar"] #root [data-skill-detail-body], html[data-ateth-lang="ar"] #root [data-ateth-skills] [data-skill-open] > span:last-child { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif !important; font-weight: 400 !important; line-height: 1.85; } @media (max-width: 760px) { html[data-ateth-lang="ar"] #root [data-ar-skills-title] img { height: 32px !important; width: auto !important; } } /* -------------------------------------------------------------------------- Arabic section mark: education (v3.8.0) Third and last of the section labels to become artwork. Cropped from the 810 artboard to its ink: 97 x 95, near square like the vision mark. Sized on HEIGHT, not width -- the three marks have quite different proportions (1.02:1 here, 1.19:1 for vision, 3.8:1 for skills), so matching widths would leave them visibly unequal. Locking the height to the 40px line box of the English labels is what makes the set read as one family. -------------------------------------------------------------------------- */ html[data-ateth-lang="ar"] #root [data-ar-education-title] { display: block; text-align: center; } html[data-ateth-lang="ar"] #root [data-ar-education-title] img { display: block; height: 40px !important; width: auto !important; max-width: none !important; margin: 0 auto; } @media (max-width: 760px) { html[data-ateth-lang="ar"] #root [data-ar-education-title] img { height: 32px !important; width: auto !important; } } /* -------------------------------------------------------------------------- Arabic skill discs (v3.9.0) The overlap is built with a negative margin-LEFT on every disc after the first. Under direction: rtl the row lays out right to left, so the left side is now the trailing edge: the negative margin no longer pulls a disc onto its neighbour, it opens a gap instead -- which is why the first disc sat detached from the rest. Mirrored here: the pull moves to margin-right, the side that actually faces the previous disc in Arabic. Same amounts as the English build, so the overlap reads identically. -------------------------------------------------------------------------- */ html[data-ateth-lang="ar"] #root [data-ateth-skills] > button { margin-left: 0 !important; margin-right: clamp(-72px, -5.2vw, -38px) !important; } html[data-ateth-lang="ar"] #root [data-ateth-skills] > button:first-child { margin-right: 0 !important; } @media (max-width: 760px) { html[data-ateth-lang="ar"] #root [data-ateth-skills] > button { margin-left: 0 !important; margin-right: -3vw !important; } html[data-ateth-lang="ar"] #root [data-ateth-skills] > button:first-child { margin-right: 0 !important; } /* the label inset is mirrored for the same reason */ html[data-ateth-lang="ar"] #root [data-ateth-skills] > button [data-skill-label] { padding: 0 3vw; } } /* -------------------------------------------------------------------------- Arabic footer headline (v3.11.0) The English headline is two lines of clamp(72px, 13vw, 190px) type. Measured at 1379px: 179px font, 143.4px line box, so the pair occupies 287px of height. The artwork carries both lines in one file, so matching that 287px is what makes the two languages the same size. Height is the anchor, not width: the CONTACT ME circle is absolutely centred on this block, so changing its height would move the circle off the middle. Set in em of the same clamp the English type uses, so the two scale together at every viewport instead of only agreeing at one width. -------------------------------------------------------------------------- */ html[data-ateth-lang="ar"] #root [data-ar-footer-title] { display: block; /* v3.27.0: 1.6 -> 2.0 -> 2.4 on request, i.e. 50% larger than the English line box it originally matched. The circle stays centred because it is positioned absolutely against this block, so both grow together. The second term is a guard, not decoration: the artwork is 1.931:1, so at 2.4 the clamp floor of 72px asks for 334px of width -- wider than a 360px phone can give once padding is allowed for. Capping the height at 46.6vw (= 90vw / 1.931) makes the width the binding constraint on narrow screens instead of letting max-width letterbox the image and silently break the height. */ height: min(calc(clamp(72px, 13vw, 190px) * 2.4), 46.6vw) !important; width: auto !important; max-width: 92vw !important; object-fit: contain; margin: 0 auto; } /* -------------------------------------------------------------------------- Arabic menu marks (v3.12.0) The two menu links become artwork. Measured English item: 104px type in a 106px line box, so the marks are locked to that height -- and expressed with the same clamp the type uses, so both languages scale together. The hover underline is a span positioned against the anchor, so it keeps working untouched; only the label inside the anchor changed. -------------------------------------------------------------------------- */ html[data-ateth-lang="ar"] #root [data-menu-item] { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } html[data-ateth-lang="ar"] #root [data-ar-menu-mark] { display: block; height: calc(clamp(44px, 10vw, 104px) * 0.88) !important; width: auto !important; max-width: 78vw !important; object-fit: contain; } /* -------------------------------------------------------------------------- Arabic contact page (v3.13.0) The headline is artwork again, so the box goes back to the English structure: a fixed-ratio stage the two shapes are positioned against. The earlier flattening was only needed while the headline was live text. The artwork's own ratio is 390x228 (1.71:1) against the English 701x513 (1.37:1), so it is centred inside the stage rather than stretched to fill it. -------------------------------------------------------------------------- */ html[data-ateth-lang="ar"] #root .ateth-contact-head { aspect-ratio: 701 / 513; display: flex; align-items: center; justify-content: center; } /* The word is cropped to its ink, so at 100% it filled the stage edge to edge and the two shapes had nowhere to sit but on top of the letters' dots. In the supplied design the word occupies roughly the reading two thirds and the shapes stand clear beyond its end -- so the artwork is pulled to the start edge at 70% and the shapes live in the third that opens up. */ html[data-ateth-lang="ar"] #root .ateth-contact-head { justify-content: flex-start; } html[data-ateth-lang="ar"] #root img[data-ar-contact-head] { display: block; width: 70% !important; height: auto !important; max-width: none !important; object-fit: contain; } /* Nothing on this page may create horizontal scroll: the page is rtl, where the browser treats the far side as scrollable. */ html[data-ateth-lang="ar"] [data-ateth-contact-shell] { overflow-x: hidden; max-width: 100vw; } /* -------------------------------------------------------------------------- Contact headline, line by line (v3.14.0) The headline was one image of three lines, so it could only ever arrive as a single block. Rasterising it and scanning for rows carrying ink found the three bands -- 0..154, 185..333, 364..512 -- and each is now its own file cropped to that band, all sharing the 701 viewBox width so they stay in register when stacked. The crops keep the original line spacing inside them. -------------------------------------------------------------------------- */ @keyframes atethLineIn { from { opacity: 0; transform: translateY(0.28em); } to { opacity: 1; transform: translateY(0); } } .ateth-contact-head [data-en-head-line], .ateth-contact-head img[data-ar-contact-head] { animation: atethLineIn 900ms cubic-bezier(0.22, 1, 0.36, 1) both; } .ateth-contact-head [data-en-head-line="0"] { animation-delay: 0ms; } .ateth-contact-head [data-en-head-line="1"] { animation-delay: 140ms; } .ateth-contact-head [data-en-head-line="2"] { animation-delay: 280ms; } /* The stage stretches any image to its full height; three stacked lines have to share that height instead of each claiming all of it. */ .ateth-contact-head [data-en-head-line] { display: block; width: 100%; height: auto !important; } /* The two shapes follow the lines in rather than arriving with them. */ .ateth-contact-head img[aria-hidden="true"] { animation: atethLineIn 900ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 420ms; } @media (prefers-reduced-motion: reduce) { .ateth-contact-head [data-en-head-line], .ateth-contact-head img[data-ar-contact-head], .ateth-contact-head img[aria-hidden="true"] { animation: none; } } /* The Arabic sheet re-points every inline Fraunces declaration at the Arabic display stack. That is right for words and wrong for the project numbers: (01)-(05) are Latin digits and are meant to read identically in both languages. Nicole is not licensed to us yet, so they were falling through to Reem Kufi and no longer matched the English column. data-ateth-latin marks the few runs that must stay on the English face; the second selector carries an extra attribute so it outranks the blanket [style*='Fraunces'] rule. */ html[data-ateth-lang="ar"] #root [data-ateth-latin], html[data-ateth-lang="ar"] #root [data-ateth-latin][style*="Fraunces"] { font-family: 'Fraunces', 'Instrument Serif', Georgia, serif !important; } /* -------------------------------------------------------------------------- Footer call-to-action: pulse on touch (v3.26.0) On a pointer device the circle already announces itself -- it fills with red and inverts its label on hover. Touch has no hover state, so that affordance simply does not exist on a phone and the circle reads as flat artwork. The pulse restores it: a slow scale plus a ring that expands and fades, keyed to (hover: none) and (pointer: coarse) so it appears exactly where hover cannot. -------------------------------------------------------------------------- */ @keyframes atethCtaPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 233, 228, 0.55); } 70% { transform: scale(1.05); box-shadow: 0 0 0 24px rgba(255, 233, 228, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 233, 228, 0); } } @media (hover: none) and (pointer: coarse) { html[data-ateth-lang="ar"] #root [data-ateth-cta-circle] { animation: atethCtaPulse 2600ms ease-in-out infinite; will-change: transform; } } @media (prefers-reduced-motion: reduce) { html[data-ateth-lang="ar"] #root [data-ateth-cta-circle] { animation: none !important; } } /* -------------------------------------------------------------------------- Copy protection (v3.34.0) Applied to both language trees at once: the selector keys off #root, which is the single mount point / and /ar/ share, so the two can never drift apart. The exclusion list below is not optional. The contact page is a form -- kill selection everywhere and a visitor cannot paste their own email address, cannot select a word to fix a typo, and on iOS cannot place the caret at all. That turns a copy restriction into a broken contact form, which costs far more than the copying it prevents. -------------------------------------------------------------------------- */ #root, #root * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; } #root input, #root textarea, #root select, #root option, #root [contenteditable="true"] { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; -webkit-touch-callout: default !important; } /* Stop the drag-to-desktop and the iOS long-press Save Image sheet: the artwork is the work itself. */ #root img, #root svg, #root picture { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; } #root ::selection { background: transparent; } #root ::-moz-selection { background: transparent; } #root input::selection, #root textarea::selection { background: rgba(255, 40, 30, 0.25); }