/* ============================================================ HYPERLINK — 论坛皮肤风格的角色扮演主页 左侧固定菜单栏 + 斜纹分隔 + 论坛横幅 + 板块与题材列表。 配色做成了整套变量：六十多套主题只改 --accent1 / --accent2 两个值， 明暗、棕褐、低对比各自覆盖一批变量。 本地化说明： * 原稿的图标来自 unpkg 上的 @phosphor-icons/web，这里只留下页面实际用到的 17 个图标码点和两个字体文件（regular + duotone）； * Inter（可变字体）和 Poppins 从 Google Fonts 换成本地文件； * 原稿还引了两个 jcink 上的自定义字体（Boldone / Starborn），那两个文件 有防盗链、直连拿得到 403，而且 Starborn 只落在一个空元素上（那个小菱形 是 ::before 画的）、Boldone 全篇没用到，所以这里直接省去，观感不受影响。 ============================================================ */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/inter-var.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/poppins-400.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("../assets/poppins-900.woff2") format("woff2"); } @font-face { font-family: "Phosphor"; font-style: normal; font-weight: normal; font-display: block; src: url("../assets/phosphor.woff2") format("woff2"); } @font-face { font-family: "Phosphor-Duotone"; font-style: normal; font-weight: normal; font-display: block; src: url("../assets/phosphor-duotone.woff2") format("woff2"); } /* --- Phosphor 图标（只保留用到的） --- */ .ph, .ph-duotone { font-style: normal; font-variant: normal; text-transform: none; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ph { font-family: "Phosphor" !important; } .ph-duotone { font-family: "Phosphor-Duotone" !important; } .ph-hand-pointing:before { content: "\e29a"; } .ph-arrow-circle-up:before { content: "\e030"; } .ph-house:before { content: "\e2c2"; } .ph-bell:before { content: "\e0ce"; } .ph-paper-plane-tilt:before { content: "\e398"; } .ph-power:before { content: "\e3da"; } .ph-user-plus:before { content: "\e4d0"; } .ph-arrow-circle-down:before { content: "\e028"; } .ph-hand-waving:before { content: "\e580"; } .ph-ruler:before { content: "\e6b8"; } .ph-palette:before { content: "\e6c8"; } .ph-code:before { content: "\e1bc"; } .ph-smiley:before { content: "\e436"; } .ph-smiley-x-eyes:before { content: "\e442"; } .ph-hand-fist:before { content: "\e57a"; } /* duotone 是两层：前层 20% 透明度打底，后层错位一格的实心部分 */ .ph-duotone.ph-bookmark-simple:before { content: "\e0ea"; opacity: 0.2; } .ph-duotone.ph-bookmark-simple:after { content: "\e0eb"; margin-left: -1em; } .ph-duotone.ph-cursor-click:before { content: "\e7c8"; opacity: 0.2; } .ph-duotone.ph-cursor-click:after { content: "\e7c9"; margin-left: -1em; } /* ============================================================ 以下是原稿样式，除了图片路径换成本地之外没有改动 ============================================================ */ :root { --fontSize: 14px; --lineHeight: 22px; } body { margin:0px;background-color:var(--bg1); --titleFont: 'Poppins', sans-serif; --bodyFont: 'Inter', sans-serif; --starFont: 'Starborn', sans-serif; --bubblyFont: 'Boldone', sans-serif; --bg1: #e3e3e3; --bg2: #d3d3d3; --bg3: #ddd; --bgInverse: #333; --bgInverse2: #444; --darkBg1: #2e2e2e; --darkBg2: #222; --darkInverse1: #222; --darkInverse2: #333; --darkDarker: #222; --sepia1: #dedbd5; /* bg1 */ --sepia2: #c2bab0; /* bg2 */ --sepia3: #b3aaa1; /* notWhite */ /* STANDARD COLORS */ --pinkDark: #e06594; --pinkLight: #e39fb7; --redDark: #c73854; --redLight: #de6a7a; --orangeDark: #d15f4d; --orangeLight: #e6987e; --yellowDark: #bd881e; --yellowLight: #d9b86c; --greenDark: #59804d; --greenLight: #A6BF80; --tealDark: #2a848c; --tealLight: #79baba; --blueDark: #6265b3; --blueLight: #8b9be0; --purpleDark: #8451A6; --purpleLight: #b78ac2; /* PREMIUM COLORS */ --silverMid: #8696b3; --notWhite: #b0b0b0; --brownDark: #735750; --beigeLight: #b39f7d; --pinkNeon: #e6478e; --greenNeon: #65bd42; --accent1: var(--redDark); --accent2: var(--greenLight); --bannerRender: url(../assets/banner-render.png); --bannerBack: url(../assets/banner-back.png); --transition:.0s; --bannerGrayscale: grayscale(100%) contrast(70%) brightness(115%); --bannerSepia: grayscale(100%) contrast(70%) sepia(15%); --lightOutline1: var(--bg1) 2px 0px 0px, var(--bg1) 1.75517px 0.958851px 0px, var(--bg1) 1.0806px 1.68294px 0px, var(--bg1) 0.141474px 1.99499px 0px, var(--bg1) -0.832294px 1.81859px 0px, var(--bg1) -1.60229px 1.19694px 0px, var(--bg1) -1.97999px 0.28224px 0px, var(--bg1) -1.87291px -0.701566px 0px, var(--bg1) -1.30729px -1.51361px 0px, var(--bg1) -0.421592px -1.95506px 0px, var(--bg1) 0.567324px -1.91785px 0px, var(--bg1) 1.41734px -1.41108px 0px, var(--bg1) 1.92034px -0.558831px 0px; --darkOutline1: var(--bgInverse) 2px 0px 0px, var(--bgInverse) 1.75517px 0.958851px 0px, var(--bgInverse) 1.0806px 1.68294px 0px, var(--bgInverse) 0.141474px 1.99499px 0px, var(--bgInverse) -0.832294px 1.81859px 0px, var(--bgInverse) -1.60229px 1.19694px 0px, var(--bgInverse) -1.97999px 0.28224px 0px, var(--bgInverse) -1.87291px -0.701566px 0px, var(--bgInverse) -1.30729px -1.51361px 0px, var(--bgInverse) -0.421592px -1.95506px 0px, var(--bgInverse) 0.567324px -1.91785px 0px, var(--bgInverse) 1.41734px -1.41108px 0px, var(--bgInverse) 1.92034px -0.558831px 0px; } a { text-decoration:none;color:var(--accent1); } .sepiamode { --bg1: var(--sepia1);--bg2: var(--sepia2);--notWhite: var(--sepia3); --bannerGrayscale:var(--bannerSepia); } .contrastmode { filter:contrast(95%) grayscale(25%); } .darkmode { --bgInverse: var(--darkInverse1);--bgInverse2: var(--darkInverse2);--bg1: #c0c0c0;--bg2: #b0b0b0; --bannerGrayscale: grayscale(100%) contrast(70%) brightness(100%); --pinkDark: #d46a92; --pinkLight: #a64265; --redDark: #bd4652; --redLight: #80333d; --orangeDark: #c96151; --orangeLight: #8c4338; --yellowDark: #b88725; --yellowLight: #735b24; --greenDark: #59804d; --greenLight: #3c5936; --tealDark: #2a848c; --tealLight: #1f525c; --blueDark: #6568ab; --blueLight: #424278; --purpleDark: #815a9c; --purpleLight: #583763; --silverMid: #7787a3; --notWhite: #c0c0c0; --brownDark: #735750; --beigeLight: #b39f7d; --pinkNeon: #c42d6c; --greenNeon: #5aad34; } .hyp { background-color:var(--bg1);display:grid;grid-template-columns:140px 25px auto;height:100vh;color:var(--bgInverse);font:var(--fontSize) / var(--lineHeight) var(--bodyFont);width:100vw; } /* MAIN MENU */ .hyp-main-menu { position:fixed;left:165px;top:0px;bottom:0px;right:0px;background-color:var(--bg1);z-index:1111111111111111111111111;pointer-events:none;color:var(--bgInverse);padding:100px;opacity:0;font:var(--fontSize) / var(--lineHeight) var(--bodyFont); } #hyp-main-menu { display:none; } #hyp-main-menu:checked ~ .hyp-main-menu { opacity:1;pointer-events:auto; } /* SIDEBAR */ .hyp-menu { background-color:var(--bgInverse);position:sticky;top:0px;z-index:1000;color:var(--bg1);padding:43px;display:flex;flex-direction:column;align-items:stretch;gap:0px;line-height:10px; } .hyp-menu-divide { flex-grow:1;display:flex;flex-direction:column;align-items:center;gap:20px; } .hyp-menu-divide div { flex-grow:1;width:1px;background-color:var(--bgInverse2); } .hyp-menu-topr { height:140px;display:flex;align-items:flex-end; } .hyp-menu .hyp-banner-topr2 { transform:rotate(-90deg);transform-origin:top left;width:104px;height:0px;color:var(--bg1); } .hyp-menu .hyp-banner-topr2 b { transition:color var(--transition); } .hyp-menu .hyp-banner-topr2 b::before { background-color:var(--bgInverse)!important;color:var(--bg1); } .hyp-menu .hyp-banner-topr2 b::after { background-color:var(--accent2);background-image:repeating-linear-gradient(45deg, transparent 0px 3px, var(--bgInverse) 3px 5px);transition:background-color var(--transition); } .hyp-menu-topr:hover .hyp-banner-topr2 b { color:var(--accent2); } .hyp-menu-topr:hover .hyp-banner-topr2 b::after { background-color:var(--accent1); } .hyp-menu-links { display:flex;flex-direction:column;align-items:center;gap:0px; } .hyp-menu-links::before, .hyp-menu-links::after { content:'';display:block;height:9px;width:9px;background-color:var(--bgInverse2);margin:20px 0px; } .hyp-menu-links a { color:var(--bg2);font-size:25px;transition:color var(--transition);position:relative;padding:8px; } .hyp-menu-links a:hover { color:var(--accent2); } .hyp-menu-links .notif:hover { color:var(--accent1); } .hyp-menu-links a div { position:absolute;padding:3px 0px;font:800 10px / 10px var(--bodyFont);background-color:var(--accent2);color:var(--bgInverse);top:-3px;left:24px;border:solid 2px var(--bgInverse);width:20px;text-align:center;border-radius:4px; } .hyp-menu-links a div::before { position:absolute;content:'';display:block;height:0px;width:0px;border:solid 2px transparent;border-left-color:var(--accent2);border-top-color:var(--accent2);bottom:-4px;left:8px; } .hyp-menu-links a:hover div { animation: hypJump .25s ease; } @keyframes hypJump { 0% { top:-3px; } 50% { top:-8px; } 100% { top:-3px; } } .hyp-menu-click { aspect-ratio:1 / 1;margin-bottom:30px;cursor:pointer; } .hyp-menu-click1 { position:relative;box-sizing:border-box;aspect-ratio:1 / 1;background-color:var(--accent2);background-image:repeating-linear-gradient(-45deg, transparent 0px 2px, var(--bgInverse) 2px 5px);margin:0px 11px 15px 0px;display:grid;transition:background-color var(--transition); } .hyp-menu-click1::before, .hyp-menu-click1::after { content:'';display:block;height:9px;width:5px;background-color:var(--bgInverse2);position:absolute;top:0px;right:-10px; } .hyp-menu-click1::after { height:5px;width:9px;top:auto;right:auto;left:0px;bottom:-10px; } .hyp-menu-click2 { background-color:var(--bgInverse);margin:10px -15px -15px 10px;aspect-ratio:1 / 1;padding:5px; } .hyp-menu-click2 div { height:100%;width:100%;background-color:var(--bg2);color:var(--bgInverse);display:flex;justify-content:flex-end;align-items:flex-end;overflow:hidden; } .hyp-menu-click2 div i { display:block;margin:-8px;font-size:35px; } .hyp-menu-click3 { background-color:var(--bgInverse2);padding:2px 0px;text-align:center;margin-right:0px;color:var(--bg1);font:800 12px / 20px var(--bodyFont);letter-spacing:1px;text-transform:uppercase; } .hyp-menu-click2 .ph-duotone::before { opacity:1!important;color:var(--accent1);transition:color var(--transition); } .hyp-menu-click:hover .hyp-menu-click1 { background-color:var(--accent1) } .hyp-menu-click:hover .hyp-menu-click2 .ph-duotone::before { opacity:1!important;color:var(--accent2); } .hyp-slant { background-color:var(--bg1);transition:.3s;background:repeating-linear-gradient(-45deg, var(--accent2) 0px 4px, transparent 4px 8px);position:sticky;height:100vh; } .hyp-body { height:100vh;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--accent1) var(--bg1); } .hyp-wrapper { margin:0px auto;padding:85px 100px;box-shadow:0px 0px 0px 0px var(--bg1);width:100%;max-width:1800px;min-height:150vh;box-sizing:border-box; } /* BANNER TOP */ .hyp-ban { margin:-85px -100px;width:100%;padding:85px 100px;overflow:hidden; } .hyp-banner { display:grid;grid-template-columns:525px 9px 1fr;gap:50px;margin-bottom:50px; } .hyp-banner-top { grid-column: 1 / 4; } .hyp-banner-top::after { content:'';display:block;height:5px;background:linear-gradient(to right,var(--accent1) 283px, var(--bg1) 283px 293px, var(--accent2) 293px 575px,var(--bg1) 575px 585px,var(--bgInverse) 585px 100%);margin-top:50px; } .hyp-banner-top1 { display:flex;gap:10px; } .hyp-banner-sub { display:grid;grid-template-columns:auto 1fr;gap:0px 20px;white-space:nowrap;text-transform:uppercase;font:900 15px / 12px var(--bodyFont);width:283px; } .hyp-banner-sub b { display:block;background-color:var(--bgInverse);padding:7px;margin-bottom:5px;color:var(--bg1);font:800 12px / 10px var(--bodyFont);max-width:fit-content;letter-spacing:1px;box-shadow:5px 0px 0px var(--bg1),10px 0px 0px var(--accent1); } .hyp-banner-sub:nth-child(2) b { box-shadow:5px 0px 0px var(--bg1),10px 0px 0px var(--accent2); } .hyp-banner-sub:nth-child(3) b { box-shadow:5px 0px 0px var(--bg1),10px 0px 0px var(--notWhite); } .hyp-banner-sub i { height:100%;display:flex;align-items:center;justify-content:center;grid-row: 1 / 3;font:20px / 18px var(--starFont);text-transform:lowercase;background:repeating-linear-gradient(-45deg, var(--bgInverse) 0px 3px, transparent 3px 5px);aspect-ratio:1 / 1;color:var(--bg1);outline:solid 10px var(--bg1);outline-offset:-25px; } .hyp-banner-sub:nth-child(2) i::before { background-color:var(--accent2); } .hyp-banner-sub:nth-child(3) i::before { background-color:var(--notWhite); } .hyp-banner-sub i::before { height:8px;width:8px;background-color:var(--accent1);content:'';display:block;position:relative; } .hyp-banner-topr { flex-grow:1;display:flex;justify-content:flex-end; } .hyp-banner-icon { position:relative;box-sizing:border-box;aspect-ratio:1 / 1;background:repeating-linear-gradient(-45deg, var(--accent1) 0px 3px, transparent 3px 5px);margin:0px 25px 1px 0px;display:grid; } .hyp-banner-icon::before, .hyp-banner-icon::after { content:'';display:block;height:9px;width:4px;background-color:var(--bg2);position:absolute;top:0px;right:-10px; } .hyp-banner-icon::after { height:4px;width:9px;background-color:var(--bg2);top:auto;right:auto;left:0px;bottom:-10px; } .hyp-banner-icon1 { background-color:var(--bg1);margin:10px -15px -15px 10px;aspect-ratio:1 / 1;padding:5px; } .hyp-banner-icon1 div { height:100%;width:100%;background-blend-mode:lighten!important;background-size:cover!important;background-position:center!important;mix-blend-mode:multiply;filter:grayscale(100%); } .hyp-banner-topr2 { font:900 31px / 27px var(--titleFont);text-align:left;height:42px;gap:15px;margin-top:-3px; } .hyp-banner-topr2 b { display:block;color:var(--accent1);position:relative; } .hyp-banner-topr2 b::before { content:'forum';display:block;position:absolute;bottom:0px;right:-1px;background-color:var(--bg1);font:800 10px / 9px var(--bodyFont);text-transform:uppercase;padding:3px 0px 3px 0px;letter-spacing:1px;width:47px;text-align:right;color:var(--bgInverse); } .hyp-banner-topr2 b::after { content:'';display:block;position:absolute;top:3px;right:0px;height:8px;width:26px;background:repeating-linear-gradient(-45deg, var(--accent2) 0px 2px, transparent 2px 4px); } /* BANNER LEFT */ .hyp-banner-name { font:900 157px / 135px var(--titleFont);margin-left:-5px;text-transform:uppercase;white-space:nowrap; } .hyp-banner-name b { font:900 157px / 135px var(--titleFont);display:flex;color:var(--accent2);align-items:flex-end;position:relative; } .hyp-banner-name b::before { content:'';display:block;position:absolute;top:12px;right:0px;left:395px;background:repeating-linear-gradient(-45deg, var(--accent1) 0px 5px, transparent 5px 8px);height:75px;text-transform:lowercase; } .hyp-banner-name b::after { content:'est.12.3028';font:900 34px / 15px var(--bodyFont);margin:0px 0px 8px 0px;left:294px;right:-5px;color:var(--bgInverse);background-color:var(--bg1);padding:36px 5px 10px 0px;position:absolute;text-align:right; } .hyp-banner-name div { font:200 25px / 15px var(--bodyFont);color:var(--bgInverse);margin:20px 0px 0px 5px; } .hyp-banner-blurb { font:var(--fontSize) / var(--lineHeight) var(--bodyFont);text-align:justify;position:relative;padding-left:75px;margin:30px 0px 40px 0px;padding-top:30px; } .hyp-banner-blurb::before { content:'';display:block;position:absolute;top:0px;left:0px;bottom:0px;width:40px;background:repeating-linear-gradient(-45deg, var(--bg2) 0px 4px, transparent 4px 8px); } .hyp-banner-blurb::after { content:'';display:block;position:absolute;top:0px;left:85px;right:0px;height:5px;background:linear-gradient(to right,var(--bgInverse) 313px,var(--bg1) 313px 323px,var(--accent2) 323px 419px, var(--bg1) 419px 429px, var(--accent1) 429px 100%);height:1px;background:var(--bgInverse); } .hyp-banner-blurb i { font-weight:700!important;color:var(--accent1); } .hyp-banner-blurb b { font:800 calc(var(--fontSize) - 2px) / calc(var(--lineHeight) - 2px) var(--bodyFont);background-color:var(--accent1);letter-spacing:1px;padding:2px 5px;color:var(--bg1);text-transform:uppercase;box-decoration-break: clone;-webkit-box-decoration-break: clone; } .hyp-banner-event { background-color:var(--accent1);border-radius:0px;padding:40px 40px 45px 185px;color:var(--bg1);display:grid;grid-template-columns:1fr auto;gap:40px;position:relative;align-items:center; } .hyp-banner-event-img { position:absolute;top:0px;bottom:0px;left:0px;width:75%;mix-blend-mode:lighten;opacity:.0; -webkit-mask-image: linear-gradient(to right,#000 35%,transparent); -webkit-mask-size: auto 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: top left; } .hyp-banner-event-img::before { content:'';display:block;height:100%;width:100%;background-image:var(--bannerBack);background-position:center;filter:grayscale(100%); } .hyp-banner-event-left { font:900 38px / 33px var(--titleFont);text-transform:uppercase;white-space:nowrap;display:flex;flex-direction:column;letter-spacing:-.5px;text-align:left; } .hyp-banner-event-left div { font:400 17px / 12px var(--titleFont);margin:0px 0px 13px 0px;letter-spacing:1px;order:-1; } .hyp-banner-event-right { position:absolute;right:20px;bottom:20px;font-size:100px; } .hyp-banner-event-right .ph-duotone::before { color:var(--accent2);opacity:1!important; } .hyp-banner-event-right .ph-duotone::after { position:relative;z-index:1; } .hyp-banner-event-icon { font-size:192px;line-height:0px;position:absolute;z-index:1;top:-36px;left:0px;text-align:left; } .hyp-banner-event-icon .ph-duotone::before { color:var(--accent2);opacity:1!important; } .hyp-banner-event-icon .ph-duotone::after { position:relative;z-index:1; } .hyp-banner-event2 { display:flex;gap:50px;align-items:center;margin-top:50px; } .hyp-banner-event2::before, .hyp-banner-img3::after { content:'';height:9px;width:9px;background-color:var(--bgInverse); } .hyp-banner-event2::after, .hyp-banner-img3::before { content:'';height:1px;flex-grow:1;background-color:var(--bgInverse); } /* VERTICAL DIVIDER */ .hyp-banner-divide { display:flex;flex-direction:column;align-items:center;margin-top:12px;gap:50px; } .hyp-banner-divide div { width:1px;flex-grow:1;background-color:var(--bgInverse); } .hyp-banner-divide::before, .hyp-banner-divide::after { content:'';display:block;height:9px;width:9px;background-color:var(--bgInverse); } /* HORIZONTAL DIVIDER */ .hyp-hor-divide { display:flex;align-items:center;gap:50px;width:100%;margin:50px 0px; } .hyp-hor-divide div { height:1px;flex-grow:1;background-color:var(--bgInverse); } .hyp-hor-divide::before, .hyp-hor-divide::after { content:'';display:block;height:9px;width:9px;background-color:var(--bgInverse); } /* BANNER IMAGE */ .hyp-banner-img { flex-grow:1;position:relative;margin-top:0px;margin-left:0px;border-radius:10px; } .hyp-banner-img::before { content:'';display:none;height:170px;width:calc(35% - 30px);background:repeating-linear-gradient(-45deg, var(--accent1) 0px 4px, transparent 4px 8px);position:absolute;z-index:2;top:12px;right:0px; } .hyp-banner-render { pointer-events:none;position:absolute;z-index:3;display:flex;justify-content:center;width:100%;min-width:575px; } .hyp-banner-render::before, .hyp-banner-render::after { content:'';display:block;width:836px;height:1071px;background-image:var(--bannerRender);position:absolute;margin:-253px 0px 0px -8%; } .hyp-banner-render::before { filter:contrast(0%) brightness(40%); } .hyp-banner-render::after { mix-blend-mode:lighten;filter:var(--bannerGrayscale); } .hyp-banner-img2 { background-color:var(--accent2);background:linear-gradient(to bottom,var(--accent2) 50%,transparent calc(100% - 60px));border-radius:0px;position:absolute;bottom:0px;right:0px;left:0px;top:12px; overflow:hidden; } .hyp-banner-img3 { display:flex;gap:50px;align-items:center;margin-top:50px;position:absolute;bottom:0px;width:100%; } .hyp-banner-render-text { position:absolute;z-index:1;font:900 300px / 212px var(--titleFont);text-transform:uppercase;color:var(--bg1);height:100%;width:100%;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;letter-spacing:-10px;box-sizing:border-box;padding:105px 0px 0px 80px;text-align:right; } .hyp-banner-render-text b { display:block; } .hyp-banner-render-text b:nth-child(2) { margin-right:-24px;display:flex; } .hyp-banner-render-text b:nth-child(2)::before { content:'';display:block;margin:50px 50px 0px 15px;background:repeating-linear-gradient(-45deg, var(--bg1) 0px 5px, transparent 5px 8px);flex-grow:1; } .hyp-banner-bot { height:25px;display:none; } .hyp-banner-bot div { height:100%;background:repeating-linear-gradient(-45deg, var(--bgInverse) 0px 4px, transparent 4px 8px); } .hyp-banner-bot2 { display:none;gap:10px;justify-content:flex-end;flex-wrap:wrap;text-transform:uppercase;margin:30px 5px 0px 0px; } .hyp-banner-bot2 div { background-color:var(--accent2);padding:10px;color:var(--bgInverse);font:800 12px / 10px var(--bodyFont);letter-spacing:1px;text-align:center; } .hyp-cat { background-color:var(--bgInverse);color:var(--bg1);padding:40px 50px;font:900 41px / 35px var(--titleFont);text-transform:uppercase;margin-top:0px;display:flex;gap:50px;align-items:center; } .hyp-cat::after { content:'';display:block;height:9px;width:9px;background-color:var(--bgInverse2);margin-right:10px; } .hyp-cat1-name { color:var(--bg1);padding-left:15px;position:relative; } .hyp-cat1-name::before { content:'';display:block;position:absolute;top:3px;bottom:3px;left:-50px;width:30px;background:repeating-linear-gradient(-45deg, var(--bg2) 0px 4px, transparent 4px 8px); } .hyp-cat1-name b { color:var(--accent1);padding-left:4px; } .hyp-cat1-name:hover b { color:var(--accent2); } .hyp-cat1-divide { display:flex;gap:50px;align-items:center;flex-grow:1; } .hyp-cat1-divide::after { content:'';display:block;height:1px;background-color:var(--bgInverse2);flex-grow:1; } .hyp-cat1-divide::before { content:'';display:block;height:9px;width:9px;background-color:var(--bgInverse2); } .hyp-cat1-links { display:flex;align-items:center;margin-right:-10px;position:relative; } .hyp-cat1-links::before { height:9px;width:9px;background-color:var(--bgInverse2);margin-right:40px;content:'';display:block; } .hyp-cat1-links a { color:var(--bg1);font-size:30px;display:flex;justify-content:center;align-items:flex-end;position:relative;padding:20px 10px; } .hyp-cat1-links a div { font:800 calc(var(--fontSize) * .7) / calc(var(--fontSize) * .8) var(--bodyFont);position:absolute;background-color:var(--accent2);padding:7px;color:var(--bgInverse);border-radius:2px;margin-bottom:40px;opacity:0;pointer-events:none;letter-spacing:1px;display:flex;align-items:flex-end;justify-content:center; } .hyp-cat1-links a div::before { position:absolute;content:'';display:block;bottom:-10px;border:solid 5px transparent;border-top-color:var(--accent2); } .hyp-cat1-links a:hover { color:var(--accent1); } .hyp-cat1-links a:hover div { opacity:1;animation: hypJump2 .3s ease; } @keyframes hypJump2 { 0% { transform:scaleY(1);margin-bottom:40px; } 50% { margin-bottom:45px; } 100% { margin-bottom:40px; } } .hyp-cat2 { display:flex;margin:25px 0px;gap:30px;align-items:center; } .hyp-cat2 span { display:block;height:1px;flex-grow:3;background-color:var(--bgInverse); } .hyp-cat2-left { height:9px;flex-grow:1;background:repeating-linear-gradient(-45deg, transparent 0px 5px, var(--bgInverse) 5px 8px); } .hyp-cat2-right { display:flex;gap:10px;align-items:center; } .hyp-cat2-right div, .hyp-cat2-right::before, .hyp-cat2-right::after { content:'';display:block;height:9px;width:9px;background-color:var(--bgInverse); } .hyp-genres { display:grid;grid-template-columns:250px auto;gap:50px;margin-top:50px; } .hyp-genres-left { background:var(--accent1); } .hyp-genres-right { display:grid;gap:50px; } .hyp-genres-anchor { padding:50px 50px 0px 0px;text-align:right;position:sticky;top:0px; } .hyp-genres-anchor a { display:block;font:800 15px / 15px var(--bodyFont);color:var(--bg1);text-transform:uppercase;padding:10px 0px 0px 35px; } .hyp-genre { display:grid;grid-template-columns:9px auto;gap:50px;scroll-margin-top:50px; } .hyp-genre-left { background-color:var(--bgInverse);width:1px;margin:0px auto; } .hyp-genre-top { position:relative; } .hyp-genre-icon { position:absolute;z-index:1;pointer-events:none;color:var(--bg1);font-size:150px;top:-50px;right:30px; } .hyp-genre-icon .ph-duotone::before { color:var(--accent2);opacity:1!important; } .hyp-genre-icon .ph-duotone::after { position:relative;z-index:1; } .hyp-genre-name { display:block;font:900 48px / 40px var(--titleFont);text-transform:uppercase;color:var(--bgInverse);margin-bottom:25px; } .hyp-genre-desc { width:50%;padding-left:75px;position:relative; } .hyp-genre-desc::before { content:'';display:block;position:absolute;top:0px;left:0px;bottom:0px;width:40px;background:repeating-linear-gradient(-45deg, var(--accent2) 0px 4px, transparent 4px 8px); } .hyp-genre-desc b { font:800 calc(var(--fontSize) - 2px) / calc(var(--lineHeight) - 2px) var(--bodyFont);background-color:var(--accent1);letter-spacing:1px;padding:2px 5px;color:var(--bg1);text-transform:uppercase;box-decoration-break: clone;-webkit-box-decoration-break: clone; } .hyp-genre-desc i { font-weight:700!important;color:var(--accent1); } .hyp-genre-bot { display:grid;grid-template-columns:150px auto;grid-template-rows:repeat(50,auto);gap:0px 50px;margin-top:50px; } .hyp-genre-bot input[type=radio] { display:none; } .hyp-subgenre { grid-column:2 / 3;grid-row:1 / 51;opacity:0;pointer-events:none; } .hyp-subgenre-label { cursor:pointer;display:block;background-color:var(--bgInverse);padding:10px;margin-bottom:5px;color:var(--bg1);font:800 var(--fontSize) / var(--fontSize) var(--bodyFont);text-transform:uppercase;letter-spacing:1px;box-shadow:5px 0px 0px var(--bg1),10px 0px 0px var(--accent2); } .hyp-subgenre-label:hover, input[type=radio]:checked + .hyp-subgenre-label { box-shadow:5px 0px 0px var(--bg1),10px 0px 0px var(--accent1); } #hyp-subgenre-sup1:checked ~ .hyp-subgenre-sup1, #hyp-subgenre-sup2:checked ~ .hyp-subgenre-sup2, #hyp-subgenre-act1:checked ~ .hyp-subgenre-act1, #hyp-subgenre-act2:checked ~ .hyp-subgenre-act2, #hyp-subgenre-act3:checked ~ .hyp-subgenre-act3 { opacity:1;pointer-events:auto; } /* DARKMODE */ .darkmode .hyp { background-color:var(--darkBg1);color:var(--bg2); } .darkmode .hyp-main-menu { background-color:var(--darkBg1);color:var(--bg1); } .darkmode .hyp-menu-links a { color:var(--bg2); } .darkmode .hyp-menu-links a:hover { color:var(--accent2); } .darkmode .hyp-menu-links .notif:hover { color:var(--accent1); } .darkmode .hyp-body { scrollbar-color:var(--accent1) var(--darkBg1); } .darkmode .hyp-banner-top::after { background:linear-gradient(to right,var(--accent1) 283px, var(--darkBg1) 283px 293px, var(--accent2) 293px 575px,var(--darkBg1) 575px 585px,var(--bgInverse) 585px 100%); } .darkmode .hyp-banner-sub i { outline-color:var(--darkBg1);background:repeating-linear-gradient(-45deg, var(--accent1) 0px 3px, transparent 3px 5px) } .darkmode .hyp-banner-sub:nth-child(2) i { outline-color:var(--darkBg1);background:repeating-linear-gradient(-45deg, var(--accent2) 0px 3px, transparent 3px 5px) } .darkmode .hyp-banner-sub:nth-child(3) i { outline-color:var(--darkBg1);background:repeating-linear-gradient(-45deg, var(--notWhite) 0px 3px, transparent 3px 5px) } .darkmode .hyp-banner-sub i::before { background-color:var(--bg2); } .darkmode .hyp-banner-sub b { box-shadow: 5px 0px 0px var(--darkBg1),10px 0px 0px var(--accent1); } .darkmode .hyp-banner-sub:nth-child(2) b { box-shadow: 5px 0px 0px var(--darkBg1),10px 0px 0px var(--accent2); } .darkmode .hyp-banner-sub:nth-child(3) b { box-shadow: 5px 0px 0px var(--darkBg1),10px 0px 0px var(--notWhite); } .darkmode .hyp-banner-icon1 { background-color:var(--darkBg1); } .darkmode .hyp-banner-icon1 div { mix-blend-mode:lighten;filter:contrast(85%) grayscale(100%) brightness(90%); } .darkmode .hyp-banner-topr2 b::before { background-color:var(--darkBg1);color:var(--bg2); } .darkmode .hyp-banner-icon { background:repeating-linear-gradient(-45deg, var(--accent2) 0px 3px, transparent 3px 5px) } .darkmode .hyp-banner-icon::before, .darkmode .hyp-banner-icon::after { background-color:var(--accent1); } .darkmode .hyp-banner-divide div, .darkmode .hyp-banner-divide::before, .darkmode .hyp-banner-divide::after, .darkmode .hyp-banner-event2 div, .darkmode .hyp-banner-event2::before, .darkmode .hyp-banner-event2::after, .darkmode .hyp-banner-img3 div, .darkmode .hyp-banner-img3::before, .darkmode .hyp-banner-img3::after, .darkmode .hyp-hor-divide div, .darkmode .hyp-hor-divide::before, .darkmode .hyp-hor-divide::after { background-color:var(--darkDarker); } .darkmode .hyp-banner-name { color:var(--bg1); } .darkmode .hyp-banner-name b::after { background-color:var(--darkBg1);color:var(--bg1); } .darkmode .hyp-banner-blurb::before, .darkmode .hyp-banner-bot div { background:repeating-linear-gradient(-45deg, var(--darkBg2) 0px 4px, transparent 4px 8px); } .darkmode .hyp-banner-blurb b { color:var(--darkBg1); } .darkmode .hyp-banner-event { color:var(--darkBg1); } .darkmode .hyp-banner-event-icon { color:var(--darkBg1); } .darkmode .hyp-banner-render::before { filter:contrast(0%) brightness(0%); } .darkmode .hyp-banner-render-text { color:var(--darkBg1); } .darkmode .hyp-banner-render-text b:nth-child(2)::before { background:repeating-linear-gradient(-45deg, var(--darkBg1) 0px 5px, transparent 5px 8px); } .darkmode .hyp-banner-bot { border-color:var(--bg2); } .darkmode .hyp-banner-bot div { background:repeating-linear-gradient(-45deg, var(--accent2) 0px 4px, transparent 4px 8px); } /* MONOCHROME */ .monochrome .hyp-menu-links .notif:hover { color:var(--bg2); } .monochrome .hyp-menu .hyp-banner-topr2 b { color:var(--bg1); } .monochrome .hyp-menu-topr:hover b { color:var(--accent2); } .monochrome .hyp-menu-topr:hover .hyp-banner-topr2 b::after { background-color:var(--bg1); } .monochrome .hyp-menu-click:hover .hyp-menu-click1 { background-color:var(--bg2) } .monochrome .hyp-menu-click:hover .hyp-menu-click2 .ph-duotone::before { color:var(--accent1); } .monochrome .hyp-banner-sub:nth-child(3) i::before { background-color:var(--accent1); } .monochrome .hyp-banner-sub:nth-child(3) b { box-shadow:5px 0px 0px var(--bg1),10px 0px 0px var(--accent1) } .monochrome .hyp-banner-icon::before, .monochrome .hyp-banner-icon::after { background-color:var(--accent2); } .paintBlack { --bg2: var(--bg1);--bgInverse2:var(--bg1); } .paintBlack .hyp-menu-links a:hover, .paintBlack .hyp-menu-topr:hover b { color:var(--bg1); } .paintBlack .hyp-menu-click2 .ph-duotone::before { color:var(--bg1)!important; } .paintBlack .hyp-menu-click3 { color:var(--bgInverse); } .paintBlack .hyp-menu-topr .hyp-banner-topr2 b::after, .paintBlack .hyp-menu-click1, .paintBlack .hyp-menu-links a div { background-color:var(--bg1); } .paintBlack .hyp-menu-links a div::before { border-left-color: var(--bg1);border-top-color: var(--bg1); } .paintBlack .hyp-banner-blurb::before { background:repeating-linear-gradient(-45deg, var(--bgInverse) 0px 4px, transparent 4px 8px); } .paintBlack .hyp-banner-render-text b:nth-child(2), .monochrome .hyp-banner-render-text b:nth-child(2) { text-align:right;align-self:flex-end; } .monochrome .hyp-banner-render-text b:nth-child(2)::before { display:none; } .monochrome .hyp-banner-img2 { background:var(--accent2);margin-bottom:60px; } .monochrome .hyp-banner-img2::before { content:'';display:block;position:absolute;height:100%;left:-5px;right:-5px;transform:scaleY(-1);background-image: radial-gradient(circle,var(--bg1) 85%,transparent 0),radial-gradient(circle,var(--bg1) 80%,transparent 0),radial-gradient(circle,var(--bg1) 75%,transparent 0),radial-gradient(circle,var(--bg1) 70%,transparent 0),radial-gradient(circle,var(--bg1) 65%,transparent 0),radial-gradient(circle,var(--bg1) 60%,transparent 0),radial-gradient(circle,var(--bg1) 55%,transparent 0),radial-gradient(circle,var(--bg1) 50%,transparent 0),radial-gradient(circle,var(--bg1) 45%,transparent 0),radial-gradient(circle,var(--bg1) 40%,transparent 0),radial-gradient(circle,var(--bg1) 35%,transparent 0),radial-gradient(circle,var(--bg1) 30%,transparent 0),radial-gradient(circle,var(--bg1) 25%,transparent 0),radial-gradient(circle,var(--bg1) 20%,transparent 0);background-size: 1em 1em;background-repeat: repeat-x;background-position:0 0,0 1em,0 2em,0 3em,0 4em,0 5em,0 6em,0 7em,0 8em,0 9em,0 10em,0 11em,0 12em,0 13em; } .paintBlack .hyp-banner-bot div { background:repeating-linear-gradient(-45deg, transparent 0px 5px, var(--accent1) 5px 8px); } .darkmode .monochrome { --accent1: var(--bg1)!important; } .darkmode .newsPrint { --accent2: #666; } .darkmode .paintBlack { --bg1: #aaa;--accent2: var(--bg1);--darkBg1:var(--bgInverse); } .darkmode .monochrome .hyp-banner-sub:nth-child(3) b { box-shadow:5px 0px 0px var(--darkBg1),10px 0px 0px var(--accent1) } .darkmode .monochrome .hyp-banner-icon::before, .darkmode .monochrome .hyp-banner-icon::after { background-color:var(--bgInverse); } .darkmode .paintBlack .hyp-banner-top::after { background:linear-gradient(to right,var(--accent1) 283px, var(--darkBg1) 283px 293px, var(--accent2) 293px 575px,var(--darkBg1) 575px 585px,var(--accent1) 585px 100%) } .darkmode .paintBlack .hyp-banner-sub b, .darkmode .paintBlack .hyp-banner-icon::before, .darkmode .paintBlack .hyp-banner-icon::after, .darkmode .paintBlack .hyp-banner-blurb::after, .darkmode .paintBlack .hyp-banner-divide div, .darkmode .paintBlack .hyp-banner-divide::before, .darkmode .paintBlack .hyp-banner-divide::after, .darkmode .paintBlack .hyp-banner-event2::before, .darkmode .paintBlack .hyp-banner-event2::after, .darkmode .paintBlack .hyp-banner-img3::before, .darkmode .paintBlack .hyp-banner-img3::after { background-color:var(--bg1);color:var(--bgInverse); } .darkmode .paintBlack .hyp-banner-blurb::before { background:repeating-linear-gradient(-45deg, var(--bg1) 0px 4px, transparent 4px 8px); } .darkmode .paintBlack .hyp-banner-img2 { background:var(--bg1); } .darkmode .monochrome .hyp-banner-img2::before { background-image: radial-gradient(circle,var(--darkBg1) 85%,transparent 0),radial-gradient(circle,var(--darkBg1) 80%,transparent 0),radial-gradient(circle,var(--darkBg1) 75%,transparent 0),radial-gradient(circle,var(--darkBg1) 70%,transparent 0),radial-gradient(circle,var(--darkBg1) 65%,transparent 0),radial-gradient(circle,var(--darkBg1) 60%,transparent 0),radial-gradient(circle,var(--darkBg1) 55%,transparent 0),radial-gradient(circle,var(--darkBg1) 50%,transparent 0),radial-gradient(circle,var(--darkBg1) 45%,transparent 0),radial-gradient(circle,var(--darkBg1) 40%,transparent 0),radial-gradient(circle,var(--darkBg1) 35%,transparent 0),radial-gradient(circle,var(--darkBg1) 30%,transparent 0),radial-gradient(circle,var(--darkBg1) 25%,transparent 0),radial-gradient(circle,var(--darkBg1) 20%,transparent 0); } /* BREAKPOINTS: 1585px */ @media (max-width: 1585px) { .hyp-banner-topr { display:none; } .hyp-banner-render { justify-content:flex-start; } .hyp-banner-render::before, .hyp-banner-render::after { margin-left:-100px; } } @media (max-height: 800px) { .hyp-menu-topr { display:none; } .hyp-menu-divide:nth-of-type(4) { display:none; } } @media (max-height: 650px) { .hyp-menu-links { justify-content:flex-end;flex-grow:1; } .hyp-menu-links::before, .hyp-menu-links::after, .hyp-menu-divide { display:none; } } /* DEFAULT PALETTE */ .defaultPalette { --bannerGrayscale: none; } .darkmode .defaultPalette { --bannerGrayscale: contrast(70%) brightness(100%); --accent1: var(--redDark);--accent2: var(--pinkLight); } /* CHANGE TO MATCH WHATEVER COLORS */ /* BASIC GROUPS */ .prettyPink { --accent1: var(--pinkDark);--accent2: var(--pinkLight); } .cherryRed { --accent1: var(--redDark);--accent2: var(--redLight); } .tangyOrange { --accent1: var(--orangeDark);--accent2: var(--orangeLight); } .glitterGold { --accent1: var(--yellowDark);--accent2: var(--yellowLight); } .leafyGreen { --accent1: var(--greenDark);--accent2: var(--greenLight); } .seafoamTeal { --accent1: var(--tealDark);--accent2: var(--tealLight); } .berryBlue { --accent1: var(--blueDark);--accent2: var(--blueLight); } .perfectPurple { --accent1: var(--purpleDark);--accent2: var(--purpleLight); } /* PREMIUM GROUPS */ .bubblegumCrisis { --accent1: var(--pinkDark);--accent2: var(--redLight); } .darkmode .bubblegumCrisis { --accent1: var(--redDark);--accent2: var(--pinkLight); } .pinkLemonade { --accent1: var(--pinkDark);--accent2: var(--yellowLight); } .darkmode .pinkLemonade { --accent1: var(--yellowDark);--accent2: var(--pinkLight); } .hatsuneMiku { --accent1: var(--pinkDark);--accent2: var(--tealLight); } .darkmode .hatsuneMiku { --accent1: var(--tealDark);--accent2: var(--pinkLight); } .unicornDust { --accent1: var(--pinkDark);--accent2: var(--purpleLight); } .darkmode .unicornDust { --accent1: var(--purpleDark);--accent2: var(--pinkLight); } .appleOrchard { --accent1: var(--redDark);--accent2: var(--greenLight); } .darkmode .appleOrchard { --accent1: var(--greenDark);--accent2: var(--redLight); } .retroGamer { --accent1: var(--redDark);--accent2: var(--blueLight); } .darkmode .retroGamer { --accent1: var(--blueDark);--accent2: var(--redLight); } .summerSunshine { --accent1: var(--orangeDark);--accent2: var(--yellowLight); } .darkmode .summerSunshine { --accent1: var(--yellowDark);--accent2: var(--orangeDark); } .citrusTwist { --accent1: var(--orangeDark);--accent2: var(--greenLight); } .darkmode .citrusTwist { --accent1: var(--orangeDark);--accent2: var(--greenDark); } .goldfishPond { --accent1: var(--orangeDark);--accent2: var(--blueLight); } .darkmode .goldfishPond { --accent1: var(--blueDark);--accent2: var(--orangeLight); } .lightningBolt { --accent1: var(--yellowDark);--accent2: var(--tealLight); } .darkmode .lightningBolt { --accent1: var(--tealDark);--accent2: var(--yellowLight); } .mayFlowers { --accent1: var(--yellowDark);--accent2: var(--purpleLight); } .darkmode .mayFlowers { --accent1: var(--yellowDark);--accent2: var(--purpleDark); } .melonSlice { --accent1: var(--greenDark);--accent2: var(--redLight); } .darkmode .melonSlice { --accent1: var(--greenDark);--accent2: var(--pinkLight); } .blindJustice { --accent1: var(--tealDark);--accent2: var(--redLight); } .darkmode .blindJustice { --accent1: var(--redDark);--accent2: var(--tealLight); } .greenerGrass { --accent1: var(--tealDark);--accent2: var(--greenLight); } .darkmode .greenerGrass { --accent1: var(--greenDark);--accent2: var(--tealLight); } .circusTent { --accent1: var(--blueDark);--accent2: var(--pinkLight); } .darkmode .circusTent { --accent1: var(--pinkDark);--accent2: var(--blueLight); } .popsicleStick { --accent1: var(--blueDark);--accent2: var(--redDark); } .darkmode .popsicleStick { --accent1: var(--redDark);--accent2: var(--blueDark); } .blueberryLemonade { --accent1: var(--blueDark);--accent2: var(--yellowLight); } .darkmode .blueberryLemonade { --accent1: var(--yellowDark);--accent2: var(--blueLight); } .gamecubeController { --accent1: var(--blueDark);--accent2: var(--purpleLight); } .darkmode .gamecubeController { --accent1: var(--purpleDark);--accent2: var(--blueLight); } .mulberryBush { --accent1: var(--purpleDark);--accent2: var(--redLight); } .darkmode .mulberryBush { --accent1: var(--redDark);--accent2: var(--purpleLight); } .jokerBaby { --accent1: var(--purpleDark);--accent2: var(--greenLight); } .darkmode .jokerBaby { --accent1: var(--greenDark);--accent2: var(--purpleLight); } .dixieCup { --accent1: var(--purpleDark);--accent2: var(--tealLight); } .darkmode .dixieCup { --accent1: var(--tealDark);--accent2: var(--purpleLight); } /* SPECIAL GROUPS */ .preciousMetals { --accent1: var(--beigeLight);--accent2: var(--notWhite); } .darkmode .preciousMetals { --accent1: var(--beigeLight);--accent2: var(--silverMid); } .cyberPunk { --accent1: var(--silverMid);--accent2: var(--greenNeon); } .darkmode .cyberPunk { --accent1: var(--greenNeon);--accent2: var(--silverMid); } .cyberPink { --accent1: var(--silverMid);--accent2: var(--pinkNeon); } .darkmode .cyberPink { --accent1: var(--pinkNeon);--accent2: var(--silverMid); } .sourCandies { --accent1: var(--pinkNeon);--accent2: var(--greenNeon); } .darkmode .sourCandies { --accent1: var(--greenNeon);--accent2: var(--pinkNeon); } .coffeeCake { --accent1: var(--brownDark);--accent2: var(--beigeLight); } .darkmode .coffeeCake { --accent1: var(--beigeLight);--accent2: var(--brownDark); } .neaPolitan { --accent1: var(--brownDark);--accent2: var(--redLight); } .darkmode .neaPolitan { --accent1: var(--pinkDark);--accent2: var(--brownDark); } .pikaPika { --accent1: var(--brownDark);--accent2: var(--yellowDark); } .darkmode .pikaPika { --accent1: var(--yellowDark);--accent2: var(--brownDark); } .camoGear { --accent1: var(--brownDark);--accent2: var(--greenDark); } .darkmode .camoGear { --accent1: var(--greenDark);--accent2: var(--brownDark); } .peppermintPatty { --accent1: var(--brownDark);--accent2: var(--tealLight); } .darkmode .peppermintPatty { --accent1: var(--tealDark);--accent2: var(--brownDark); } /* MONOCHROME GROUPS */ .pastelGoth { --accent1: var(--bgInverse);--accent2: var(--pinkDark); } .vampireBlood { --accent1: var(--bgInverse);--accent2: var(--redDark); } .jackoLantern { --accent1: var(--bgInverse);--accent2: var(--orangeDark); } .bumbleBee { --accent1: var(--bgInverse);--accent2: var(--yellowDark); } .getSlimed { --accent1: var(--bgInverse);--accent2: var(--greenNeon); } .winterNight { --accent1: var(--bgInverse);--accent2: var(--tealLight); } .darkmode .winterNight { --accent1: var(--bgInverse);--accent2: var(--tealDark); } .brutalistBlue { --accent1: var(--bgInverse);--accent2: var(--blueDark); } .witchingHour { --accent1: var(--bgInverse);--accent2: var(--purpleLight); } .darkmode .witchingHour { --accent1: var(--bgInverse);--accent2: var(--purpleDark); } .doberMann { --accent1: var(--bgInverse);--accent2: var(--brownDark); } .newsPrint { --accent1: var(--bgInverse);--accent2: var(--notWhite); } .paintBlack { --accent1: var(--bgInverse);--accent2: var(--bgInverse); } /* HOLIDAY GROUPS */ .thanksGiving { --accent1: var(--brownDark);--accent2: var(--orangeDark); } .darkmode .thanksGiving { --accent1: var(--orangeDark);--accent2: var(--brownDark); } .halloWeen { --accent1: var(--orangeDark);--accent2: var(--purpleLight); } .stPatrick { --accent1: var(--greenDark);--accent2: var(--beigeLight); } .darkmode .stPatrick { --accent1: var(--beigeLight);--accent2: var(--greenDark); } .easTer { --accent1: var(--purpleLight);--accent2: var(--pinkLight); } .darkmode .easTer { --accent1: var(--pinkDark);--accent2: var(--purpleDark); } .newYear { --accent1: var(--yellowDark);--accent2: var(--redDark); } .kwanZaa { --accent1: var(--greenDark);--accent2: var(--redDark); } .darkmode .kwanZaa { --accent1: var(--redDark);--accent2: var(--greenDark); } .valentinesDay { --accent1: var(--redDark);--accent2: var(--pinkLight); } .darkmode .valentinesDay { --accent1: var(--pinkDark);--accent2: var(--redDark); } .hanuKkah { --accent1: var(--blueDark);--accent2: var(--notWhite); } .darkmode .hanuKkah { --accent1: var(--notWhite);--accent2: var(--blueDark); }