/* ========================================================================== Fantastic+ — Colors & Type Fantasy entertainment label (books, games, products). Palette: noturno místico + detalhes de pergaminho dourado Extracted from "Os Contos de Koppi — A Lenda de Trôntor" cover art. ========================================================================== */ /* Brand font (uploaded): - Display: Windlass — medieval/fantasy display font, matches the FANTASTIC wordmark. Used for H1s, big display, and brand moments. Google Fonts substitutions for roles not covered by Windlass: - Title: Uncial Antiqua (medieval, used sparingly for chapter headings) - Body: Fraunces (warm, storybook-feeling serif with narrative voice) - UI/meta: Inter (legibility for small labels, forms, nav) */ @font-face { font-family: "Windlass"; src: url("assets/31cfb795-2d06-4c76-83be-f6769e037d77.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; } /* vietnamese */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/13d9dcac-39d3-4b48-8011-e35137ba6657.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: 400; font-display: swap; src: url("assets/52d2a263-b023-4356-a637-a34fdf962205.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: 400; font-display: swap; src: url("assets/23e37127-6ef7-43c3-9f3a-f84218177028.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: 500; font-display: swap; src: url("assets/13d9dcac-39d3-4b48-8011-e35137ba6657.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: 500; font-display: swap; src: url("assets/52d2a263-b023-4356-a637-a34fdf962205.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: 500; font-display: swap; src: url("assets/23e37127-6ef7-43c3-9f3a-f84218177028.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: 400; font-display: swap; src: url("assets/c434164d-d1fc-4056-8c9d-074501c63a4f.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: 400; font-display: swap; src: url("assets/9087673b-af98-486e-989b-b0ae182b5ffc.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: 400; font-display: swap; src: url("assets/e9c7b521-30df-4426-b822-c0d2b836cf9b.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: 500; font-display: swap; src: url("assets/c434164d-d1fc-4056-8c9d-074501c63a4f.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: 500; font-display: swap; src: url("assets/9087673b-af98-486e-989b-b0ae182b5ffc.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: 500; font-display: swap; src: url("assets/e9c7b521-30df-4426-b822-c0d2b836cf9b.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: 600; font-display: swap; src: url("assets/c434164d-d1fc-4056-8c9d-074501c63a4f.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: 600; font-display: swap; src: url("assets/9087673b-af98-486e-989b-b0ae182b5ffc.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: 600; font-display: swap; src: url("assets/e9c7b521-30df-4426-b822-c0d2b836cf9b.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: 700; font-display: swap; src: url("assets/c434164d-d1fc-4056-8c9d-074501c63a4f.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: 700; font-display: swap; src: url("assets/9087673b-af98-486e-989b-b0ae182b5ffc.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: 700; font-display: swap; src: url("assets/e9c7b521-30df-4426-b822-c0d2b836cf9b.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: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/023130c7-6e3f-45db-9754-593d55dec940.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: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/7024dad5-dd57-443b-ad9e-f8aef7aafa50.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/e47248f7-a23d-4a1e-809f-c055ec2ae480.woff2") format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/95480274-d319-4496-abbc-557045ec28f0.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/eb7b775b-0d5d-49b6-afc3-3d5f35474e0e.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: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/30e02daa-a742-40cf-b1eb-331cb35828df.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: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/601104c0-ab00-4c8e-ad8e-5a6486c7c8d6.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: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/023130c7-6e3f-45db-9754-593d55dec940.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: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/7024dad5-dd57-443b-ad9e-f8aef7aafa50.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/e47248f7-a23d-4a1e-809f-c055ec2ae480.woff2") format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/95480274-d319-4496-abbc-557045ec28f0.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/eb7b775b-0d5d-49b6-afc3-3d5f35474e0e.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: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/30e02daa-a742-40cf-b1eb-331cb35828df.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: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/601104c0-ab00-4c8e-ad8e-5a6486c7c8d6.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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/023130c7-6e3f-45db-9754-593d55dec940.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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/7024dad5-dd57-443b-ad9e-f8aef7aafa50.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/e47248f7-a23d-4a1e-809f-c055ec2ae480.woff2") format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/95480274-d319-4496-abbc-557045ec28f0.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/eb7b775b-0d5d-49b6-afc3-3d5f35474e0e.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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/30e02daa-a742-40cf-b1eb-331cb35828df.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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/601104c0-ab00-4c8e-ad8e-5a6486c7c8d6.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: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/023130c7-6e3f-45db-9754-593d55dec940.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: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/7024dad5-dd57-443b-ad9e-f8aef7aafa50.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/e47248f7-a23d-4a1e-809f-c055ec2ae480.woff2") format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/95480274-d319-4496-abbc-557045ec28f0.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/eb7b775b-0d5d-49b6-afc3-3d5f35474e0e.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: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/30e02daa-a742-40cf-b1eb-331cb35828df.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: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/601104c0-ab00-4c8e-ad8e-5a6486c7c8d6.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: 'Uncial Antiqua'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/8bfb9caf-f638-419e-bcb5-7ce78a7cff80.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: 'Uncial Antiqua'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/a9f5fec6-7019-4b34-a7b4-2803731993e8.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; } /* Cinzel — classic Roman caps serif (self-hosted from Google Fonts, OFL). Weights 400/500/600/700, each with latin-ext + latin (Portuguese accents live in the latin block, U+0000-00FF). */ @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/cinzel-400-ext.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; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/cinzel-400.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; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/cinzel-500-ext.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; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/cinzel-500.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; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/cinzel-600-ext.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; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/cinzel-600.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; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/cinzel-700-ext.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; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/cinzel-700.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; } :root { /* ---------- Core night palette (sampled from the cover) ---------- */ --night-abyss: #070d1a; /* page background, deepest */ --night-deep: #0c162b; /* primary surface */ --night-navy: #12233f; /* raised surface */ --night-indigo: #1b3558; /* borders, inset */ --night-forest: #00395a; /* forest shadow */ --moonlight: #5dabdb; /* mid blue, "moonbeam" */ --moonlight-hi: #86cdf1; /* bright highlight */ --moonlight-soft: #b9def2; /* soft glow */ --mist: #e9f2f8; /* nearly-white, cold */ /* ---------- Parchment & gold (accent / warm) ---------- */ --gold: #e6c278; /* primary gold — CTAs, title strokes */ --gold-bright: #f5d98a; /* hover / glow */ --gold-deep: #a8823d; /* pressed / border */ --gold-shadow: #6b4e1f; /* deep engraving */ --parchment: #f4e7c9; /* parchment paper */ --parchment-warm: #e8d4a5; /* aged parchment */ --ink-brown: #3a2a17; /* parchment ink text */ --ember: #c85a2c; /* fire/torch accent, use sparingly */ /* ---------- Semantic tokens ---------- */ --bg: var(--night-abyss); --bg-surface: var(--night-deep); --bg-raised: var(--night-navy); --bg-parchment: var(--parchment); --fg: var(--mist); --fg-muted: #9db4c7; --fg-faint: #6a7f93; --fg-gold: var(--gold); --fg-ink: var(--ink-brown); --border: rgba(230, 194, 120, 0.18); /* gold at low alpha — "gilded" */ --border-strong: rgba(230, 194, 120, 0.45); --border-cool: rgba(134, 205, 241, 0.15); --accent: var(--gold); --accent-fg: var(--night-abyss); --focus-ring: var(--moonlight-hi); /* ---------- Gradients ---------- */ --grad-night: radial-gradient(ellipse at 50% 20%, var(--night-indigo) 0%, var(--night-deep) 40%, var(--night-abyss) 100%); --grad-moonbeam: radial-gradient(ellipse at 50% 80%, rgba(134,205,241,0.18) 0%, transparent 60%); --grad-gold: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 50%, var(--gold-deep) 100%); --grad-parchment: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-warm) 100%); /* ---------- Elevation / shadows ---------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 6px 18px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3); --shadow-lg: 0 20px 50px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.35); --shadow-gold: 0 0 0 1px rgba(230,194,120,0.4), 0 10px 30px rgba(230,194,120,0.15); --glow-moon: 0 0 60px rgba(134,205,241,0.25); /* ---------- Radii ---------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; /* ---------- Spacing scale (4px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---------- Typography families ---------- */ --font-display: "Windlass", "Cinzel Decorative", "Trajan Pro", "Times New Roman", serif; --font-title: "Windlass", "Uncial Antiqua", serif; --font-body: "Fraunces", "Georgia", "Times New Roman", serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ---------- Type scale ---------- */ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 38px; --fs-4xl: 52px; --fs-5xl: 72px; --fs-6xl: 104px; --fs-7xl: 144px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1); --dur-fast: 160ms; --dur-med: 320ms; --dur-slow: 680ms; --dur-epic: 1400ms; } /* ========================================================================== Semantic / element styles — opt-in via class, to avoid leaking into kits. ========================================================================== */ .fp-display { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.01em; color: var(--gold); text-shadow: 0 2px 0 var(--gold-shadow), 0 0 40px rgba(230,194,120,0.25); } .fp-title { font-family: var(--font-title); font-weight: 400; color: var(--parchment); letter-spacing: 0.04em; } .fp-h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(var(--fs-4xl), 7vw, var(--fs-6xl)); line-height: 1.02; color: var(--gold); letter-spacing: 0.01em; } .fp-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--fs-2xl), 3.5vw, var(--fs-4xl)); line-height: 1.1; color: var(--parchment); } .fp-h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-2xl); line-height: 1.2; font-style: italic; color: var(--mist); } .fp-eyebrow { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); } .fp-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lg); line-height: 1.65; color: var(--fg); text-wrap: pretty; } .fp-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-xl); line-height: 1.55; color: var(--mist); font-style: italic; } .fp-caption { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); } .fp-ornament { font-family: var(--font-body); color: var(--gold); opacity: 0.75; font-size: var(--fs-xl); letter-spacing: 1em; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--night-abyss); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-lg); line-height: 1.65; overflow-x: hidden; min-height: 100vh; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* -------- Parchment texture (generated via SVG data URI) -------- */ :root { --paper-noise: url("data:image/svg+xml;utf8,"); } .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 48px; } @media (max-width: 700px) { .container { padding: 0 24px; } } /* ============ NAV ============ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; background: rgba(26,18,8,0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(230,194,120,0.12); } .nav-logo { height: 26px; opacity: 0.95; } .nav-links { display: flex; gap: 32px; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--parchment-warm); font-weight: 500; } .nav-links a { transition: color var(--dur-fast); } .nav-links a:hover { color: var(--gold); } @media (max-width: 800px) { .nav-links { display: none; } } /* ============ HERO: v1-style — short, centered, empty cover backdrop ============ */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 72px 48px 40px; overflow: hidden; isolation: isolate; background: var(--night-abyss); } .hero-bg { position: absolute; inset: 0; z-index: -2; background-image: url("assets/8d0c349e-45d8-45fd-94f7-174bdce7e915.jpg"); background-size: cover; background-position: center center; opacity: 0.45; filter: saturate(1) brightness(1); transform: scale(1.05); } .hero-bg::before { /* Lighter overlay for legibility */ content:""; position:absolute; inset:0; background: radial-gradient(ellipse at 50% 45%, rgba(7,13,26,0.15) 0%, rgba(7,13,26,0.5) 70%, rgba(7,13,26,0.85) 100%); } .hero-bg::after { content:""; position:absolute; inset:0; background: radial-gradient(ellipse at 20% 95%, rgba(6,20,36,0.55), transparent 45%), radial-gradient(ellipse at 80% 95%, rgba(6,20,36,0.55), transparent 45%), linear-gradient(180deg, rgba(7,13,26,0.1) 0%, transparent 30%, transparent 70%, rgba(7,13,26,0.85) 100%); } /* Fireflies */ .fireflies { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .firefly { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 8px 2px rgba(245,217,138,0.8), 0 0 20px 4px rgba(245,217,138,0.3); opacity: 0; animation: firefly-float 18s infinite ease-in-out; } @keyframes firefly-float { 0%, 100% { transform: translate(0, 0); opacity: 0; } 10%, 90% { opacity: 0.9; } 25% { transform: translate(40px, -30px); opacity: 0.5; } 50% { transform: translate(-20px, -60px); opacity: 1; } 75% { transform: translate(30px, -90px); opacity: 0.4; } } .hero-inner { position: relative; z-index: 1; max-width: 720px; text-align: center; padding: 12px 0; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; opacity: 0; animation: fadeUp 900ms var(--ease-out) 200ms forwards; } .hero-eyebrow::before, .hero-eyebrow::after { content: ""; width: 24px; height: 1px; background: var(--gold-deep); } .hero-koppi { display: block; width: clamp(140px, 15vw, 200px); margin: 0 auto 6px; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5)) drop-shadow(0 6px 20px rgba(230,194,120,0.2)) drop-shadow(0 0 40px rgba(7,13,26,0.6)); opacity: 0; animation: fadeUp 900ms var(--ease-out) 350ms forwards; } .hero-title { display: block; width: clamp(220px, 30vw, 430px); margin: 0 auto 10px; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6)) drop-shadow(0 8px 24px rgba(134,205,241,0.22)) drop-shadow(0 0 40px rgba(7,13,26,0.75)); opacity: 0; animation: fadeUp 1200ms var(--ease-out) 500ms forwards; } .hero-lead { font-family: var(--font-body); font-style: italic; font-size: clamp(14px, 1.2vw, 17px); color: var(--moonlight-soft); max-width: 500px; margin: 0 auto 18px; text-wrap: balance; line-height: 1.5; opacity: 0; animation: fadeUp 900ms var(--ease-out) 800ms forwards; } .hero-ornament { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--gold); opacity: 0.8; font-size: 13px; letter-spacing: 0.4em; margin-bottom: 12px; opacity: 0; animation: fadeUp 900ms var(--ease-out) 1000ms forwards; } .hero-ornament::before, .hero-ornament::after { content: ""; height: 1px; flex: 0 0 64px; background: linear-gradient(90deg, transparent, var(--gold-deep), transparent); } .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--grad-gold); color: var(--night-abyss); font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; border: 0; border-radius: 2px; cursor: pointer; box-shadow: 0 8px 20px rgba(230,194,120,0.2); transition: transform var(--dur-fast), box-shadow var(--dur-med); opacity: 0; animation: fadeUp 900ms var(--ease-out) 1100ms forwards; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(230,194,120,0.35); } .btn-primary .arrow { transition: transform var(--dur-med) var(--ease-out); } .btn-primary:hover .arrow { transform: translateX(4px); } .hero-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-faint); display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; animation: fadeIn 900ms var(--ease-out) 1400ms forwards; } .hero-scroll::after { content: ""; width: 1px; height: 28px; background: linear-gradient(180deg, var(--gold-deep), transparent); animation: pulse-line 2.4s var(--ease-out) infinite; } @keyframes pulse-line { 0%, 100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ============ SECTION BASE ============ */ section { padding: 110px 0; position: relative; } @media (max-width: 700px) { section { padding: 72px 0; } } .eyebrow { font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; } .eyebrow::before { content: "✦"; font-size: 10px; } .section-title { font-family: var(--font-title); font-size: clamp(34px, 4.6vw, 56px); font-weight: 400; line-height: 1.08; color: var(--parchment); letter-spacing: 0.02em; text-wrap: balance; } /* ============ SYNOPSIS as an open page ============ */ .synopsis { background: linear-gradient(180deg, #0c0805 0%, #1a1208 50%, #0c0805 100%); padding: 120px 0 64px; } .page { position: relative; max-width: 960px; margin: 0 auto; padding: 80px 80px 100px; background: linear-gradient(180deg, #f4e7c9 0%, #e8d4a5 100%); color: var(--ink-brown); box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(107,78,31,0.25), inset 0 0 120px rgba(107,78,31,0.15); border-radius: 4px; } .page::before { content: ""; position: absolute; inset: 0; background: var(--paper-noise); opacity: 0.8; mix-blend-mode: multiply; pointer-events: none; border-radius: 4px; } .page::after { /* Burn/stain edges */ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 0%, rgba(107,78,31,0.3), transparent 25%), radial-gradient(ellipse at 100% 100%, rgba(107,78,31,0.3), transparent 25%), radial-gradient(ellipse at 100% 0%, rgba(60,30,10,0.2), transparent 18%), radial-gradient(ellipse at 0% 100%, rgba(60,30,10,0.2), transparent 18%); pointer-events: none; border-radius: 4px; } .page-eyebrow { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.45em; text-transform: uppercase; color: var(--gold-shadow); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; } .page-eyebrow::before, .page-eyebrow::after { content:""; flex:1; height:1px; background: linear-gradient(90deg, transparent, var(--gold-shadow), transparent); } .page h2 { font-family: var(--font-title); font-size: clamp(32px, 4vw, 52px); color: var(--ink-brown); line-height: 1.1; letter-spacing: 0.02em; text-align: center; margin-bottom: 40px; text-wrap: balance; } .page p { font-family: var(--font-body); font-size: 18px; line-height: 1.75; color: #2e1f0d; margin-bottom: 1.2em; } .page p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-size: 5em; line-height: 0.86; padding: 6px 14px 0 0; color: var(--gold-shadow); font-weight: 900; } .page-ornament { text-align: center; font-size: 20px; letter-spacing: 1em; color: var(--gold-shadow); margin: 32px 0 8px; opacity: 0.7; } .page-meta { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(107,78,31,0.3); display: flex; flex-wrap: wrap; gap: 8px 32px; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-shadow); } .page-meta strong { color: var(--ink-brown); font-weight: 600; letter-spacing: 0.15em; } @media (max-width: 700px) { .page { padding: 48px 28px 64px; } .page p { font-size: 16px; } } /* ============ AUTHOR : side-by-side portrait frame ============ */ .author { background: var(--night-abyss); position: relative; padding: 64px 0 72px; } .author-grid { display: grid; grid-template-columns: 320px 1fr; gap: 80px; align-items: center; } @media (max-width: 900px) { .author-grid { grid-template-columns: 1fr; text-align: center; } } .portrait-frame { position: relative; padding: 14px; border: 1px solid var(--border-strong); border-radius: 2px; background: linear-gradient(135deg, rgba(230,194,120,0.08), rgba(230,194,120,0.02)); } .portrait-frame::before { content:""; position:absolute; inset:6px; border: 1px solid rgba(230,194,120,0.18); pointer-events:none; } .portrait { aspect-ratio: 3/4; background: radial-gradient(ellipse at 50% 30%, #3b5a7a 0%, #1a2a44 60%, #0c162b 100%); position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 86px; font-weight: 900; color: var(--gold); letter-spacing: -0.04em; } .portrait-caption { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--fg-muted); text-align: center; margin-top: 14px; } .author-body .eyebrow { justify-content: flex-start; } .author-body h2 { font-family: 'Cinzel', serif; font-size: clamp(40px, 4.4vw, 60px); color: var(--gold); font-weight: 700; letter-spacing: 0.02em; margin-bottom: 8px; } .author-role { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 28px; } .author-body p { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--mist); font-style: italic; max-width: 620px; } @media (max-width: 900px) { .author-body p { margin-left: auto; margin-right: auto; } .author-body .eyebrow { justify-content: center; } } .author-body p + p { margin-top: 1.1em; } .author-sig { margin-top: 28px; font-family: var(--font-title); font-size: 32px; color: var(--gold); opacity: 0.75; letter-spacing: 0.04em; } /* ============ UNIVERSES : horizontal scroll strip ============ */ .universes { background: linear-gradient(180deg, var(--night-abyss) 0%, #0a0806 100%); padding: 64px 0 16px; } .universes-head { text-align: center; max-width: 680px; margin: 0 auto 48px; } .universes-head .eyebrow { justify-content: center; } .strip { display: flex; gap: 20px; overflow-x: auto; padding: 20px 48px 40px; scroll-snap-type: x mandatory; scrollbar-width: none; } .strip::-webkit-scrollbar { display: none; } .u-card { position: relative; flex: 0 0 320px; aspect-ratio: 3/4; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; transition: transform var(--dur-med), border-color var(--dur-med); isolation: isolate; } .u-card::before { content:""; position:absolute; inset:0; z-index:-1; background-size: cover; background-position: center; filter: brightness(0.5) saturate(1.2); transition: filter var(--dur-med), transform var(--dur-slow); } .u-card:hover { transform: translateY(-4px); border-color: var(--border-strong); } .u-card:hover::before { filter: brightness(0.7) saturate(1.3); transform: scale(1.05); } .u-card.koppi { background: #0c2236; } .u-card.koppi .u-name .cc { font-family: 'Cinzel', serif; } .u-card.koppi::before { inset: 0 0 auto 0; height: 50%; background: linear-gradient(180deg, transparent 78%, #0c2236 100%); filter: brightness(1.02) saturate(1.05); } .u-card.mapa::before { background: linear-gradient(180deg, transparent 80%, #0c2236 100%); } .u-card.prazyr::before { background: radial-gradient(circle at 50% 30%, #6a1a10, #2a0806 80%); } .u-card.valun::before { background: radial-gradient(circle at 50% 40%, #4a3412, #1e1206 80%); } /* Imagem do card vinda do conteúdo (editável no painel). Vence as variações acima. Imagem na metade de cima; texto embaixo sobre fundo sólido (como o Koppi original). */ .u-card[style*="--card-img"] { background: #0c2236; } .u-card[style*="--card-img"]::before { inset: 0 0 auto 0; height: 50%; background: linear-gradient(180deg, transparent 78%, #0c2236 100%), var(--card-img) center top/cover; filter: brightness(1.02) saturate(1.05); } .u-card[style*="--card-img"]:hover::before { filter: brightness(1.12) saturate(1.15); } .u-tag { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .u-name { font-family: 'Cinzel', serif; font-weight: 600; font-size: 26px; color: var(--parchment); line-height: 1.15; margin-bottom: 12px; } .u-desc { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--fg-muted); line-height: 1.5; } .u-status { margin-top: 16px; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-faint); display: inline-flex; align-items: center; gap: 8px; } .u-status::before { content:""; width:6px;height:6px;border-radius:50%;background:var(--gold-deep); } .u-status.live::before { background: var(--moonlight-hi); box-shadow: 0 0 8px var(--moonlight-hi); } .u-status.live { color: var(--moonlight-soft); } /* ============ NEWSLETTER as wax-sealed letter ============ */ .newsletter { background: radial-gradient(ellipse at 50% 50%, #1f1a12 0%, #0c0805 70%); position: relative; padding: 56px 0 100px; } .letter { position: relative; max-width: 560px; margin: 0 auto; padding: 56px 48px 48px; background: linear-gradient(180deg, #f4e7c9, #e8d4a5); color: var(--ink-brown); border-radius: 2px; box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(107,78,31,0.3); } .letter::before { content:""; position:absolute; inset:0; background: var(--paper-noise); opacity: 0.7; mix-blend-mode: multiply; pointer-events: none; } .letter h2 { font-family: var(--font-title); font-size: clamp(30px, 4vw, 44px); color: var(--ink-brown); text-align: center; letter-spacing: 0.02em; margin-bottom: 18px; text-wrap: balance; } .letter p { font-family: var(--font-body); font-style: italic; font-size: 16px; text-align: center; color: #3a2a17; margin-bottom: 32px; line-height: 1.55; } .letter form { display: flex; gap: 0; background: rgba(107,78,31,0.08); border: 1px solid rgba(107,78,31,0.3); border-radius: 2px; padding: 4px; transition: border-color var(--dur-med); } .letter form:focus-within { border-color: var(--gold-shadow); } .letter input { flex: 1; background: transparent; border: 0; padding: 10px 14px; font-family: var(--font-body); font-size: 15px; color: var(--ink-brown); outline: none; } .letter input::placeholder { color: rgba(58,42,23,0.5); font-style: italic; } .letter button { background: var(--ink-brown); color: var(--parchment); border: 0; padding: 10px 22px; font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; border-radius: 2px; cursor: pointer; transition: background var(--dur-fast); } .letter button:hover { background: #1e140a; } .letter .fine { margin-top: 20px; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.18em; text-align: center; color: rgba(58,42,23,0.6); } /* Wax seal on letter */ .wax { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%) rotate(-6deg); width: 78px; height: 78px; background: radial-gradient(circle at 35% 35%, #d94a2a, #8c2a18 70%, #4a1408); border-radius: 50%; box-shadow: 0 6px 14px rgba(0,0,0,0.5), inset -4px -6px 10px rgba(0,0,0,0.4), inset 3px 4px 8px rgba(255,200,150,0.15); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); color: #f4e7c9; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; } .wax::before { content:""; position:absolute; inset:6px; border-radius:50%; border:1px dashed rgba(244,231,201,0.35); } /* ============ FOOTER ============ */ footer { background: #0a0604; padding: 80px 0 40px; border-top: 1px solid rgba(230,194,120,0.1); } .f-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } @media (max-width: 700px) { .f-grid { grid-template-columns: 1fr; } } .f-logo img { height: 32px; margin-bottom: 16px; opacity: 0.85; } .f-tag { font-family: var(--font-body); font-style: italic; color: var(--fg-muted); font-size: 14px; max-width: 320px; } .f-col h4 { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; font-weight: 600; } .f-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .f-col a { color: var(--fg-muted); font-family: var(--font-ui); font-size: 13px; transition: color var(--dur-fast); } .f-col a:hover { color: var(--gold); } .f-bottom { padding-top: 28px; border-top: 1px solid rgba(230,194,120,0.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.2em; color: var(--fg-faint); } /* reveal */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); } .reveal.in { opacity: 1; transform: translateY(0); } .rd2 { transition-delay: 120ms; } .rd3 { transition-delay: 240ms; } /* ============ BLOG VIEW (route: #blog/...) ============ */ .blog-view { display: none; } body[data-view^="blog"] .nav, body[data-view^="blog"] > .hero, body[data-view^="blog"] .synopsis, body[data-view^="blog"] .author, body[data-view^="blog"] .universes, body[data-view^="blog"] .newsletter { display: none !important; } body[data-view^="blog"] .blog-view.active { display: block; } .blog-view { background: var(--night-abyss); color: var(--fg); min-height: 100vh; padding: 0; } /* — Top bar — */ .blog-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px 40px; background: rgba(10, 6, 4, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(230,194,120,0.12); } .blog-topbar img { height: 24px; opacity: 0.92; } .blog-back { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--parchment-warm); transition: color var(--dur-fast); cursor: pointer; background: none; border: 0; padding: 0; } .blog-back:hover { color: var(--gold); } .blog-back .arrow { transition: transform var(--dur-med) var(--ease-out); display: inline-block; } .blog-back:hover .arrow { transform: translateX(-4px); } @media (max-width: 600px) { .blog-topbar { padding: 14px 20px; } .blog-back span:not(.arrow) { display:none; } } /* — Cozy reading scene — */ .blog-scene { position: relative; padding: 80px 0 0; isolation: isolate; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(245,217,138,0.14) 0%, transparent 70%), radial-gradient(ellipse at 8% 30%, rgba(7,30,50,0.55) 0%, transparent 38%), radial-gradient(ellipse at 92% 25%, rgba(7,30,50,0.45) 0%, transparent 35%), linear-gradient(180deg, #0a0604 0%, #0c0805 50%, #070d1a 100%); overflow: hidden; } /* candle glow halo */ .blog-scene::before { content: ""; position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 1100px; height: 700px; background: radial-gradient(ellipse at center, rgba(245,217,138,0.18) 0%, rgba(230,194,120,0.05) 35%, transparent 65%); pointer-events: none; z-index: -1; animation: candle-flicker 4.2s ease-in-out infinite; } @keyframes candle-flicker { 0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); } 50% { opacity: 0.85; transform: translateX(-50%) scale(1.03); } } /* fireflies on blog */ .blog-fireflies { position:absolute; inset:0; z-index:-1; pointer-events:none; } /* — Article header — */ .blog-header { max-width: 760px; margin: 0 auto; padding: 0 32px 56px; text-align: center; } .blog-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; } .blog-eyebrow::before, .blog-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--gold-deep); } .blog-title { font-family: var(--font-title); font-weight: 400; font-size: clamp(38px, 5.6vw, 76px); line-height: 1.02; color: var(--parchment); letter-spacing: 0.02em; margin-bottom: 22px; text-wrap: balance; text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 0 60px rgba(230,194,120,0.15); } .blog-dek { font-family: var(--font-body); font-style: italic; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; color: var(--moonlight-soft); max-width: 560px; margin: 0 auto 32px; text-wrap: balance; } .blog-meta { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); } .blog-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-deep); } .blog-meta strong { color: var(--parchment); font-weight: 600; letter-spacing: 0.18em; } /* — Hero image slot — */ .blog-hero { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 32px; } .blog-hero-frame { position: relative; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #1f3a5a 0%, #0c1c33 60%, #050e1c 100%); box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(230,194,120,0.28), inset 0 0 100px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; } .blog-hero-frame::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(230,194,120,0.18); pointer-events:none; border-radius: 2px; } .blog-hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-hero-placeholder { text-align: center; font-family: var(--font-ui); color: rgba(230,194,120,0.55); font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase; } .blog-hero-placeholder .ico { display: block; font-family: var(--font-display); font-size: 64px; color: rgba(230,194,120,0.55); margin-bottom: 14px; letter-spacing: 0; } /* — Article body on parchment — */ .blog-body { position: relative; max-width: 760px; margin: -48px auto 0; padding: 88px 84px 96px; background: linear-gradient(180deg, #f4e7c9 0%, #ead7a8 100%); color: var(--ink-brown); box-shadow: 0 60px 120px rgba(0,0,0,0.65), 0 0 0 1px rgba(107,78,31,0.3), inset 0 0 140px rgba(107,78,31,0.13); border-radius: 4px; z-index: 1; } .blog-body::before { content: ""; position: absolute; inset: 0; background: var(--paper-noise); opacity: 0.7; mix-blend-mode: multiply; pointer-events: none; border-radius: 4px; } .blog-body::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 0%, rgba(107,78,31,0.28), transparent 22%), radial-gradient(ellipse at 100% 100%, rgba(107,78,31,0.28), transparent 22%), radial-gradient(ellipse at 100% 0%, rgba(60,30,10,0.18), transparent 18%), radial-gradient(ellipse at 0% 100%, rgba(60,30,10,0.18), transparent 18%); pointer-events: none; border-radius: 4px; } .blog-body > * { position: relative; z-index: 1; } .blog-body p { font-family: var(--font-body); font-size: 18px; line-height: 1.78; color: #2e1f0d; margin-bottom: 1.2em; } .blog-body p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-size: 5.4em; line-height: 0.86; padding: 6px 14px 0 0; color: var(--gold-shadow); font-weight: 900; } .blog-body h2 { font-family: var(--font-title); font-size: 30px; font-weight: 400; color: var(--ink-brown); letter-spacing: 0.02em; margin: 1.8em 0 0.6em; line-height: 1.15; } .blog-body h2::before { content: "✦"; display: block; font-size: 13px; color: var(--gold-shadow); letter-spacing: 0.4em; margin-bottom: 10px; opacity: 0.7; } .blog-body blockquote { margin: 1.8em -20px; padding: 28px 36px; font-family: var(--font-body); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--gold-shadow); border-left: 2px solid var(--gold-deep); background: linear-gradient(90deg, rgba(230,194,120,0.18), transparent 60%); text-wrap: balance; } .blog-body blockquote cite { display: block; margin-top: 14px; font-style: normal; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; font-family: var(--font-ui); font-weight: 600; color: var(--gold-shadow); } /* Inline image slot */ .blog-figure { margin: 2em -44px; } .blog-figure-frame { position: relative; aspect-ratio: 4/3; border-radius: 3px; overflow: hidden; background: radial-gradient(ellipse at 60% 30%, #2a3f1c 0%, #0e1809 70%, #050a04 100%); box-shadow: 0 24px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(107,78,31,0.5), inset 0 0 50px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; } .blog-figure-frame::after { content:""; position:absolute; inset:8px; border: 1px solid rgba(244,231,201,0.12); pointer-events:none; border-radius:2px; } .blog-figure-frame .ph { font-family: var(--font-ui); color: rgba(244,231,201,0.55); font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase; text-align: center; } .blog-figure-frame .ph .ico { display: block; font-family: var(--font-display); font-size: 50px; color: rgba(244,231,201,0.7); margin-bottom: 10px; letter-spacing: 0; } .blog-figure figcaption { margin-top: 14px; text-align: center; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-shadow); } /* Video slot */ .blog-video { position: relative; margin: 2.4em -44px; aspect-ratio: 16/9; border-radius: 3px; overflow: hidden; background: radial-gradient(ellipse at 50% 50%, #1a2440 0%, #070d1a 100%); box-shadow: 0 30px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(107,78,31,0.5), inset 0 0 60px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; cursor: pointer; } .blog-video::after { content:""; position:absolute; inset:8px; border: 1px solid rgba(244,231,201,0.12); pointer-events:none; border-radius:2px; } .blog-video .play { position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 50%; background: rgba(244,231,201,0.94); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 14px rgba(244,231,201,0.10), 0 0 50px rgba(245,217,138,0.4); transition: transform var(--dur-med) var(--ease-out); } .blog-video:hover .play { transform: scale(1.08); } .blog-video .play::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--ink-brown); margin-left: 6px; } .blog-video-label { position: absolute; z-index: 1; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(244,231,201,0.65); white-space: nowrap; } /* End ornaments */ .blog-end { text-align: center; margin: 2.4em 0 0.8em; color: var(--gold-shadow); letter-spacing: 1em; opacity: 0.7; font-size: 18px; } .blog-sig { text-align: center; font-family: var(--font-title); font-size: 28px; color: var(--gold-shadow); opacity: 0.85; margin-bottom: 6px; letter-spacing: 0.04em; } .blog-sig-name { text-align: center; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(107,78,31,0.7); } /* — More posts strip — */ .blog-more { max-width: 1080px; margin: 100px auto 0; padding: 0 32px 120px; } .blog-more-head { text-align: center; margin-bottom: 40px; } .blog-more-head .eyebrow { justify-content: center; } .blog-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .blog-more-grid { grid-template-columns: 1fr; } } .blog-more-card { position: relative; aspect-ratio: 4/5; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(180deg, rgba(7,13,26,0.2) 0%, rgba(7,13,26,0.92) 100%), radial-gradient(ellipse at 30% 25%, #1a3a5a, #0c1c33 70%); transition: transform var(--dur-med), border-color var(--dur-med); cursor: pointer; } .blog-more-card:hover { transform: translateY(-4px); border-color: var(--border-strong); } .blog-more-card .tag { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .blog-more-card .ttl { font-family: var(--font-title); font-size: 22px; color: var(--parchment); line-height: 1.15; margin-bottom: 8px; } .blog-more-card .ex { font-family: var(--font-body); font-size: 13px; font-style: italic; color: var(--fg-muted); line-height: 1.55; } .blog-more-card .ex-meta { margin-top: 14px; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-faint); } /* Cursor on clickable universe card */ .u-card[data-blog] { cursor: pointer; } .u-card[data-blog]::after { content: "Ler →"; position: absolute; top: 16px; right: 16px; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); background: rgba(7,13,26,0.55); padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(230,194,120,0.3); opacity: 0; transition: opacity var(--dur-med); } .u-card[data-blog]:hover::after { opacity: 1; } @media (max-width: 760px) { .blog-body { margin: 0 16px; padding: 60px 28px 64px; } .blog-figure, .blog-video, .blog-body blockquote { margin-left: -8px; margin-right: -8px; } }