/* ============================================================ DERTIG · HYVES-SKIN (experimental — Hyvrr-replica) ------------------------------------------------------------ Activates only when Goal: 1:1 Hyves 2008 vibe matching hyvrr.nl exactly: orange topbar, blue nav, blue section-headers, white cards with pale-blue borders, Verdana, gradient placeholders. ============================================================ */ body.is-hyves-skin { /* === Hyvrr orange (topbar + buttons) === */ --hv-orange-top: #f9af4a; --hv-orange-bot: #f48922; --hv-orange-deep: #c46d00; --hv-orange-soft: #fff7ed; /* === Hyvrr blue (nav + section headers) === */ --hv-blue-top: #5aa2dc; --hv-blue-bot: #3f83bf; --hv-blue-line: #3571a6; --hv-blue-media-top: #6bb3f0; --hv-blue-media-bot: #4a90d9; --hv-blue-media-line: #3f84cd; --hv-blue-pale-top: #f1f7fd; --hv-blue-pale-bot: #e8f2fc; --hv-blue-pale-line: #cfdeed; /* === Card / surface tokens === */ --hv-card-bg: #ffffff; --hv-card-border: #cbe1f6; --hv-body-bg: #f5f5f5; --hv-text: #26384d; --hv-text-soft: #5c7691; --hv-text-link: #3b6e9b; --hv-link-strong: #4f8bbb; /* Override dertig tokens to match */ --accent: var(--hv-orange-bot); --accent-deep: var(--hv-orange-deep); --accent-soft: var(--hv-orange-soft); --bg: var(--hv-body-bg); --bg-elev: var(--hv-card-bg); --bg-soft: #eef3f8; --ink: var(--hv-text); --ink-soft: var(--hv-text-soft); --ink-muted: #89a; --line: var(--hv-card-border); --line-strong: #9fb8d6; --card: var(--hv-card-bg); --card-shadow: 0 1px 0 rgba(38, 56, 77, .04), 0 4px 10px rgba(38, 56, 77, .08); --radius: 10px; --radius-lg: 10px; --radius-pill: 999px; --font-sans: Verdana, Arial, sans-serif; --font-display: Verdana, Arial, sans-serif; background: var(--hv-body-bg); color: var(--hv-text); font-family: var(--font-sans); font-size: 13px; } body.is-hyves-skin[data-theme="dark"] { /* Hyves was nooit dark — forceer light */ --bg: var(--hv-body-bg); --bg-elev: var(--hv-card-bg); --ink: var(--hv-text); --card: var(--hv-card-bg); background: var(--hv-body-bg); color: var(--hv-text); } /* ============================================================ Topbar — orange gradient, 43px tall, FLOATING 1140px centered pill (Hyvrr-style: rounded-lg, gray bg shows on sides) ============================================================ */ body.is-hyves-skin .topbar { background: linear-gradient(to bottom, var(--hv-orange-top), var(--hv-orange-bot)); max-width: 1140px; margin: 8px auto 0; border-radius: 8px; border-bottom: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); backdrop-filter: none; -webkit-backdrop-filter: none; height: 43px; padding: 0 12px; position: static; z-index: 30; display: flex; align-items: center; justify-content: space-between; } body.is-hyves-skin .topbar__brand { background: transparent; border: 0; color: #fff; padding: 4px 6px; border-radius: 4px; } body.is-hyves-skin .topbar__brand:hover { background: rgba(255, 255, 255, 0.12); } body.is-hyves-skin .brand__mark { background: #fff; color: var(--hv-orange-deep); border: 1px solid rgba(0, 0, 0, .15); border-radius: 50%; width: 28px; height: 28px; font-family: var(--font-display); font-size: 13px; font-weight: 900; letter-spacing: 0; box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .05); position: relative; overflow: hidden; } body.is-hyves-skin .brand__wordmark { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 22px; letter-spacing: -0.5px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); } body.is-hyves-skin .brand__sub { display: none; } body.is-hyves-skin .topbar__actions { gap: 8px; } body.is-hyves-skin .iconbtn { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; width: 28px; height: 28px; border-radius: 4px; display: inline-grid; place-items: center; padding: 0; flex-shrink: 0; } body.is-hyves-skin .iconbtn > svg { display: block; } body.is-hyves-skin .iconbtn:hover { background: rgba(255, 255, 255, 0.3); } /* Hyves had geen dark-mode — knop verbergen in Hyves-skin */ body.is-hyves-skin #theme-toggle { display: none; } body.is-hyves-skin .topbar__coins, body.is-hyves-skin .topbar__points { background: #fff; color: var(--hv-orange-deep); border: 1px solid rgba(0, 0, 0, .12); height: 26px; padding: 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 12px; border-radius: 4px; box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .05); } body.is-hyves-skin .topbar__points { color: #5a4a00; background: linear-gradient(to bottom, #fff8e0, #ffe9a8); } body.is-hyves-skin .topbar__coins:hover, body.is-hyves-skin .topbar__points:hover { filter: brightness(1.05); transform: none; } /* ============================================================ Blue Hyvrr-style nav bar (injected by js/hyves-skin.js) FLOATING 1140px centered pill matching topbar ============================================================ */ body.is-hyves-skin .hv-blue-nav { background: linear-gradient(to bottom, var(--hv-blue-top), var(--hv-blue-bot)); border: 0; border-bottom: 1px solid var(--hv-blue-line); max-width: 1140px; margin: 4px auto 8px; border-radius: 8px; display: flex; justify-content: stretch; position: static; z-index: 29; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); } body.is-hyves-skin .hv-blue-nav__inner { width: 100%; height: 36px; display: flex; align-items: center; padding: 0 12px; color: #fff; overflow-x: auto; scrollbar-width: none; } body.is-hyves-skin .hv-blue-nav__inner::-webkit-scrollbar { display: none; } body.is-hyves-skin .hv-blue-nav__link { background: transparent; border: 0; color: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 700; padding: 0 8px; cursor: pointer; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); transition: opacity .12s ease; } body.is-hyves-skin .hv-blue-nav__link:hover { text-decoration: underline; } body.is-hyves-skin .hv-blue-nav__sep { color: rgba(255, 255, 255, .4); padding: 0 2px; font-weight: 400; } body.is-hyves-skin .main { background: var(--hv-body-bg); } /* ============================================================ Hyvrr-style centered 1140px wrapper for main content ============================================================ */ body.is-hyves-skin .main { max-width: 1170px; margin: 0 auto; padding-left: 16px; padding-right: 16px; } /* ============================================================ Cards — white bg, pale-blue 1px border, 10px radius ============================================================ */ body.is-hyves-skin .card, body.is-hyves-skin .panel, body.is-hyves-skin .section, body.is-hyves-skin .home-hero, body.is-hyves-skin .profile-head, body.is-hyves-skin .leaderboard__row, body.is-hyves-skin .modal__body, body.is-hyves-skin .scene-card, body.is-hyves-skin .submit-card, body.is-hyves-skin .feed-item, body.is-hyves-skin .achievement-tile, body.is-hyves-skin .member-tile, body.is-hyves-skin .bingo-grid, body.is-hyves-skin .stat-tile, body.is-hyves-skin .botw-banner, body.is-hyves-skin .tier-badge, body.is-hyves-skin .rang-progress { background: var(--hv-card-bg); border: 1px solid var(--hv-card-border); border-radius: 10px; box-shadow: none; overflow: hidden; } /* ============================================================ Section headers — blue gradient strip with white bold text Hijack `.section-h`, `.panel__h`, `h2.something` ============================================================ */ body.is-hyves-skin .section-h, body.is-hyves-skin .panel__h, body.is-hyves-skin .card > h2:first-child, body.is-hyves-skin .card > h3:first-child, body.is-hyves-skin .panel > h2:first-child, body.is-hyves-skin .panel > h3:first-child { background: linear-gradient(to bottom, var(--hv-blue-media-top), var(--hv-blue-media-bot)); border: 1px solid var(--hv-blue-media-line); border-radius: 7px 7px 0 0; color: #fff; font-size: 13px; font-weight: 700; padding: 6px 10px; margin: 14px 0 0 0; font-family: var(--font-display); text-shadow: 0 1px 0 rgba(0, 0, 0, .15); display: flex; align-items: center; justify-content: space-between; gap: 10px; } body.is-hyves-skin .section-h::before, body.is-hyves-skin .panel__h::before { content: "▸"; color: #cfe6fa; margin-right: 6px; font-size: 11px; flex: 0 0 auto; } body.is-hyves-skin .section-h h2, body.is-hyves-skin .panel__h h2 { color: #fff; font-size: 13px; font-weight: 700; font-family: var(--font-display); margin: 0; letter-spacing: 0; flex: 1; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); } body.is-hyves-skin .section-h .muted, body.is-hyves-skin .panel__h .muted, body.is-hyves-skin .section-h small, body.is-hyves-skin .panel__h small { color: #e8f3ff !important; font-weight: 600; font-size: 12px; } body.is-hyves-skin .section-h .link { color: #fff !important; font-weight: 700; text-decoration: underline; } /* ============================================================ Buttons — orange gradient primary, white secondary ============================================================ */ body.is-hyves-skin .btn { font-family: var(--font-sans); font-weight: 700; font-size: 12px; border-radius: 4px; padding: 6px 14px; letter-spacing: 0; border: 1px solid rgba(0, 0, 0, .15); box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .08); transition: filter .12s ease; } body.is-hyves-skin .btn:hover { filter: brightness(1.05); } body.is-hyves-skin .btn--primary { background: linear-gradient(to bottom, var(--hv-orange-top), var(--hv-orange-bot)); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); } body.is-hyves-skin .btn--ghost, body.is-hyves-skin .btn--secondary { background: linear-gradient(to bottom, #ffffff, #e8eef5); color: var(--hv-text); border-color: #b8c8d8; } body.is-hyves-skin .btn--danger { background: linear-gradient(to bottom, #e15555, #b73030); color: #fff; border-color: #8a1620; } /* ============================================================ Headings — Verdana, dark blue-gray, retro ============================================================ */ body.is-hyves-skin h1, body.is-hyves-skin h2, body.is-hyves-skin h3, body.is-hyves-skin h4, body.is-hyves-skin .hero__title { font-family: var(--font-display); color: var(--hv-text); letter-spacing: 0; } /* ============================================================ Hero / Home banner — Hyvrr news-card style White card with blue header strip + body content ============================================================ */ body.is-hyves-skin .home-hero, body.is-hyves-skin .hero { background: var(--hv-card-bg); border: 1px solid var(--hv-card-border); border-radius: 10px; padding: 0; color: var(--hv-text); box-shadow: 0 1px 0 rgba(38, 56, 77, .04), 0 4px 10px rgba(38, 56, 77, .08); margin-bottom: 12px; overflow: hidden; position: relative; } body.is-hyves-skin .hero::after { display: none; /* hide the giant "30" watermark */ } body.is-hyves-skin .hero__eyebrow { background: linear-gradient(to bottom, var(--hv-blue-media-top), var(--hv-blue-media-bot)); border: 0; border-radius: 0; display: flex; width: 100%; padding: 6px 10px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); box-sizing: border-box; } body.is-hyves-skin .hero__eyebrow::before { content: "▸"; margin-right: 6px; color: #cfe6fa; } body.is-hyves-skin .hero__title { color: var(--hv-text); font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 0; margin: 10px 12px 6px; line-height: 1.25; } body.is-hyves-skin .hero__sub { color: var(--hv-text-soft); font-size: 12px; opacity: 1; margin: 0 12px; line-height: 1.4; } body.is-hyves-skin .hero__cta { margin: 12px 12px 12px; } body.is-hyves-skin .hero__cta .btn { background: linear-gradient(to bottom, var(--hv-orange-top), var(--hv-orange-bot)); color: #fff; border-color: var(--hv-orange-deep); text-shadow: 0 1px 0 rgba(0, 0, 0, .15); } body.is-hyves-skin .hero__cta .btn--ghost { background: linear-gradient(to bottom, #fff, #e8eef5); color: var(--hv-text); border-color: #b8c8d8; text-shadow: none; } /* ============================================================ Boomer of the Week banner — Hyvrr "ad-card"-style block White card, blue header, avatar left, name+pts right, deel-btn ============================================================ */ body.is-hyves-skin .botw { background: var(--hv-card-bg); border: 1px solid var(--hv-card-border); border-radius: 10px; padding: 0; color: var(--hv-text); box-shadow: 0 1px 0 rgba(38, 56, 77, .04), 0 4px 10px rgba(38, 56, 77, .08); margin-bottom: 12px; overflow: hidden; position: relative; display: block; } body.is-hyves-skin .botw::after { display: none; /* hide the giant 👑 watermark */ } body.is-hyves-skin .botw::before { content: "▸ Boomer of the Week"; display: block; background: linear-gradient(to bottom, var(--hv-blue-media-top), var(--hv-blue-media-bot)); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); padding: 6px 10px; } body.is-hyves-skin .botw__avatar { width: 50px; height: 50px; border: 2px solid var(--hv-card-border); border-radius: 8px; background: linear-gradient(135deg, #f4d0bf, #c5d9f2); display: inline-grid; place-items: center; font-weight: 900; font-size: 18px; color: var(--hv-text); margin: 10px 0 10px 12px; vertical-align: middle; } body.is-hyves-skin .botw .grow { display: inline-block; margin-left: 12px; vertical-align: middle; max-width: calc(100% - 200px); } body.is-hyves-skin .botw .lbl { display: none; /* "Boomer of the Week" already in ::before */ } body.is-hyves-skin .botw .name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--hv-text-link); letter-spacing: 0; } body.is-hyves-skin .botw .pts { font-size: 12px; color: var(--hv-text-soft); opacity: 1; } body.is-hyves-skin .botw > .btn { position: absolute; right: 10px; bottom: 10px; background: linear-gradient(to bottom, #8dd14d, #5e9933) !important; border: 2px solid #5e9933 !important; color: #143f00 !important; font-weight: 700 !important; text-shadow: 0 1px 0 rgba(255,255,255,.3); } /* ============================================================ Member-tile / avatar — round, thin border (like Hyvrr thumbs) ============================================================ */ body.is-hyves-skin .member-tile { border: 1px solid var(--hv-card-border); border-radius: 6px; background: linear-gradient(135deg, #f4d0bf, #c5d9f2); box-shadow: none; } body.is-hyves-skin .member-tile:nth-child(2n) { background: linear-gradient(135deg, #f0ca90, #dba46a); } body.is-hyves-skin .member-tile:nth-child(3n) { background: linear-gradient(135deg, #f1b786, #cd7f56); } body.is-hyves-skin .member-tile:nth-child(4n) { background: linear-gradient(135deg, #cfdeef, #8ab0d5); } body.is-hyves-skin .member-tile:nth-child(5n) { background: linear-gradient(135deg, #f8cb7d, #cc8f35); } body.is-hyves-skin .profile-photo { border: 1px solid var(--hv-card-border); border-radius: 8px; box-shadow: 0 2px 4px rgba(38, 56, 77, .12); } /* ============================================================ Tier badge — orange gradient + glow ============================================================ */ body.is-hyves-skin .tier-badge { background: linear-gradient(to bottom, var(--hv-orange-top), var(--hv-orange-bot)); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); border: 1px solid var(--hv-orange-deep); box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .1); border-radius: 6px; font-family: var(--font-display); } /* ============================================================ Pills / chips — small white with thin border ============================================================ */ body.is-hyves-skin .chip, body.is-hyves-skin .login-rewards-chip, body.is-hyves-skin .streak-chip, body.is-hyves-skin .week-chip, body.is-hyves-skin .pill { background: linear-gradient(to bottom, #fff, #f0f5fb); border: 1px solid var(--hv-card-border); color: var(--hv-text); font-family: var(--font-sans); font-weight: 700; font-size: 11px; border-radius: 999px; padding: 3px 10px; box-shadow: none; } /* Reactions — keep small smileys with subtle hover bounce */ body.is-hyves-skin .reaction-btn, body.is-hyves-skin .reactions__btn { background: linear-gradient(to bottom, #fff, #f0f5fb); border: 1px solid var(--hv-card-border); font-size: 14px; border-radius: 999px; box-shadow: none; transition: transform .12s ease; } body.is-hyves-skin .reaction-btn:hover, body.is-hyves-skin .reactions__btn:hover { transform: scale(1.12); border-color: var(--hv-orange-bot); } /* ============================================================ Modals — clean white with thin orange-accent header ============================================================ */ body.is-hyves-skin .modal__body, body.is-hyves-skin .cp-modal__body { border: 1px solid var(--hv-card-border); box-shadow: 0 12px 40px rgba(38, 56, 77, .25); background: #fff; border-radius: 10px; } body.is-hyves-skin .modal__title { color: var(--hv-text); font-family: var(--font-display); background: linear-gradient(to bottom, var(--hv-blue-pale-top), var(--hv-blue-pale-bot)); border-bottom: 1px solid var(--hv-blue-pale-line); padding: 8px 12px; margin: -1px -1px 8px; border-radius: 9px 9px 0 0; font-size: 14px; } /* ============================================================ Sidemenu — white panel with blue header ============================================================ */ body.is-hyves-skin .sidemenu__panel { background: var(--hv-card-bg); border-left: 1px solid var(--hv-card-border); box-shadow: -8px 0 24px rgba(38, 56, 77, .2); } body.is-hyves-skin .sidemenu__title { background: linear-gradient(to bottom, var(--hv-blue-media-top), var(--hv-blue-media-bot)); color: #fff; border-bottom: 1px solid var(--hv-blue-media-line); padding: 6px 12px; margin: 0 -16px 8px; font-family: var(--font-display); font-size: 13px; font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); } body.is-hyves-skin .sidemenu__list button { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--hv-text); } body.is-hyves-skin .sidemenu__list button:hover { background: var(--hv-blue-pale-top); color: var(--hv-text-link); } /* ============================================================ FAB — orange gradient pill ============================================================ */ body.is-hyves-skin .fab { background: linear-gradient(to bottom, var(--hv-orange-top), var(--hv-orange-bot)); border: 1px solid var(--hv-orange-deep); box-shadow: 0 6px 14px rgba(244, 137, 34, .4); font-family: var(--font-display); font-weight: 700; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); } body.is-hyves-skin .fab:hover { filter: brightness(1.05); transform: translateY(-1px); } /* ============================================================ Bottom nav (mobile) — blue gradient ============================================================ */ body.is-hyves-skin .bottomnav { background: linear-gradient(to bottom, var(--hv-blue-top), var(--hv-blue-bot)); border-top: 1px solid var(--hv-blue-line); } body.is-hyves-skin .bottomnav__btn { color: #fff; } body.is-hyves-skin .bottomnav__btn.is-active { color: #fff; background: rgba(0, 0, 0, .15); } body.is-hyves-skin .bottomnav__btn .bn__lbl { font-size: 10px; font-weight: 700; } /* ============================================================ Digest-card — was dark gradient bg + white text in default skin, override to Hyvrr news-card so text stays readable ============================================================ */ body.is-hyves-skin .digest-card { background: var(--hv-card-bg); color: var(--hv-text); border: 1px solid var(--hv-card-border); border-radius: 10px; padding: 0; overflow: hidden; box-shadow: 0 1px 0 rgba(38, 56, 77, .04), 0 4px 10px rgba(38, 56, 77, .08); } body.is-hyves-skin .digest-card::after { display: none; } body.is-hyves-skin .digest-card .head { background: linear-gradient(to bottom, var(--hv-blue-media-top), var(--hv-blue-media-bot)); border-bottom: 1px solid var(--hv-blue-media-line); color: #fff; padding: 8px 12px; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); } body.is-hyves-skin .digest-card .head h2 { font-size: 16px; font-weight: 700; font-family: var(--font-display); margin: 0; letter-spacing: 0; color: #fff; } body.is-hyves-skin .digest-card .head > div > div { /* "DERTIG digest" kicker */ font-size: 10px !important; letter-spacing: .8px !important; opacity: 1 !important; color: #cfe6fa !important; text-transform: uppercase !important; } body.is-hyves-skin .digest-card .head .btn { background: rgba(255, 255, 255, .2) !important; color: #fff !important; border-color: rgba(255, 255, 255, .35) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); } body.is-hyves-skin .digest-card > p, body.is-hyves-skin .digest-card > div:not(.head):not(.lst):not(.row) { padding: 0 12px; margin: 8px 0; color: var(--hv-text); opacity: 1; font-size: 13px; } body.is-hyves-skin .digest-card > div[style*="font-weight"] { /* The bold section labels "🏆 Boomer of the Month" etc */ background: linear-gradient(to bottom, var(--hv-blue-pale-top), var(--hv-blue-pale-bot)); border-top: 1px solid var(--hv-blue-pale-line); border-bottom: 1px solid var(--hv-blue-pale-line); padding: 6px 12px !important; margin: 12px 0 6px !important; color: var(--hv-text-link) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .3px !important; } body.is-hyves-skin .digest-card .lst { padding: 0 12px 10px; gap: 6px !important; } body.is-hyves-skin .digest-card .row { background: var(--hv-blue-pale-top) !important; border: 1px solid var(--hv-blue-pale-line); color: var(--hv-text); border-radius: 6px; padding: 6px 8px !important; } body.is-hyves-skin .digest-card .row .num { color: var(--hv-orange-bot) !important; opacity: 1 !important; font-weight: 900 !important; } body.is-hyves-skin .digest-card .muted { color: var(--hv-text-soft) !important; } body.is-hyves-skin .digest-card > .muted { /* "Geen winnaar deze maand." inside body */ padding: 6px 12px; } /* ============================================================ Lock view (room login) — Hyvrr-style card ============================================================ */ body.is-hyves-skin .lock { background: var(--hv-card-bg); border: 1px solid var(--hv-card-border); border-radius: 10px; max-width: 420px; margin: 24px auto; padding: 0; overflow: hidden; box-shadow: 0 1px 0 rgba(38, 56, 77, .04), 0 4px 10px rgba(38, 56, 77, .08); } body.is-hyves-skin .lock h1 { background: linear-gradient(to bottom, var(--hv-blue-media-top), var(--hv-blue-media-bot)); border-bottom: 1px solid var(--hv-blue-media-line); color: #fff; font-size: 14px; font-weight: 700; padding: 8px 12px; margin: 0; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); } body.is-hyves-skin .lock h1::before { content: "🔒 "; } body.is-hyves-skin .lock__mark { display: none; } body.is-hyves-skin .lock .muted, body.is-hyves-skin .lock p { padding: 12px 12px 0; margin: 0; font-size: 12px; color: var(--hv-text-soft); } body.is-hyves-skin .lock__form { padding: 12px; display: flex; gap: 8px; align-items: center; } body.is-hyves-skin .lock__form input[type="password"] { flex: 1; font-size: 13px; } body.is-hyves-skin .lock__back { display: block; text-align: center; padding: 8px 12px 12px; font-size: 11px; color: var(--hv-text-link); text-decoration: none; } body.is-hyves-skin .lock__back:hover { text-decoration: underline; } /* ============================================================ Landing view — Hyvrr-style hero card ============================================================ */ body.is-hyves-skin .landing { max-width: 720px; margin: 24px auto; padding: 0; } body.is-hyves-skin .landing h1, body.is-hyves-skin .landing > h2 { background: linear-gradient(to bottom, var(--hv-orange-top), var(--hv-orange-bot)); color: #fff; font-size: 20px; padding: 12px 16px; margin: 0; border-radius: 10px 10px 0 0; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); } /* ============================================================ Submission feed item — Hyvrr news-card style White card with blue meta-line + readable streek + roast quote ============================================================ */ body.is-hyves-skin .feed-item { background: #fff; border: 1px solid var(--hv-card-border); border-radius: 7px; padding: 8px 10px; margin-bottom: 8px; display: flex; gap: 10px; box-shadow: none; font-size: 12px; overflow: visible; /* anders cropt grote portret-foto onderkant */ } body.is-hyves-skin .feed-item__photo { border-color: var(--hv-card-border); } /* Cycle accent borders pink/aqua/orange like Hyvrr news-card variants */ body.is-hyves-skin .feed-item:nth-child(3n+2) { border-color: #cfdeed; background: linear-gradient(to bottom, #fbfdff 0%, #fff 40%); } body.is-hyves-skin .feed-item:nth-child(3n+3) { border-color: #d9e8d9; background: linear-gradient(to bottom, #fbfff8 0%, #fff 40%); } body.is-hyves-skin .feed-item__body { flex: 1; min-width: 0; } body.is-hyves-skin .feed-item__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d9e5f1; padding-bottom: 4px; margin-bottom: 6px; gap: 8px; } body.is-hyves-skin .feed-item__name { color: var(--hv-text-link) !important; font-weight: 700 !important; font-size: 13px !important; font-family: var(--font-sans) !important; } body.is-hyves-skin .feed-item__name:hover { text-decoration: underline; } body.is-hyves-skin .feed-item__time { font-size: 10px; color: var(--hv-text-soft); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; flex: 0 0 auto; } body.is-hyves-skin .feed-item__streek { font-size: 12px; line-height: 1.4; color: var(--hv-text); margin: 4px 0 6px; } body.is-hyves-skin .feed-item__roast { background: linear-gradient(to bottom, var(--hv-blue-pale-top), var(--hv-blue-pale-bot)); border: 1px solid var(--hv-blue-pale-line); border-left: 3px solid var(--hv-blue-media-bot); border-radius: 6px; padding: 6px 10px; font-size: 12px; font-style: italic; color: #2c4e73; } body.is-hyves-skin .feed-item__meta { margin-top: 6px; gap: 4px; } body.is-hyves-skin .feed-item__meta .pill, body.is-hyves-skin .feed-item__meta .chip { font-size: 10px; padding: 2px 8px; } body.is-hyves-skin .feed-item__actions { margin-top: 6px; gap: 6px; } body.is-hyves-skin .feed-item__actions .btn { font-size: 10px; padding: 3px 8px; letter-spacing: 0; } body.is-hyves-skin .feed-item__title, body.is-hyves-skin .feed-item__cat { color: var(--hv-text-link); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; } /* ============================================================ My-rank-card — Hyvrr side-card style ============================================================ */ body.is-hyves-skin .my-rank-card { background: var(--hv-card-bg); border: 1px solid var(--hv-card-border); border-radius: 10px; padding: 0; margin-bottom: 12px; overflow: hidden; box-shadow: 0 1px 0 rgba(38, 56, 77, .04), 0 4px 10px rgba(38, 56, 77, .08); } body.is-hyves-skin .my-rank-card__lbl { background: linear-gradient(to bottom, var(--hv-blue-media-top), var(--hv-blue-media-bot)); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 6px 10px; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); } body.is-hyves-skin .my-rank-card__lbl::before { content: "▸ "; color: #cfe6fa; margin-right: 4px; } body.is-hyves-skin .my-rank-card__hint { padding: 6px 10px 10px; font-size: 11px; color: var(--hv-text-soft); } body.is-hyves-skin .my-rank-card .rang-progress, body.is-hyves-skin .my-rank-card .tier-badge { margin: 10px; } /* ============================================================ Hall-of-Fame quote — Hyvrr news-headline-row style ============================================================ */ body.is-hyves-skin .hof-quote { background: linear-gradient(to bottom, var(--hv-blue-pale-top), var(--hv-blue-pale-bot)); border: 1px solid var(--hv-blue-pale-line); border-left: 4px solid var(--hv-orange-bot) !important; border-radius: 7px; padding: 8px 10px; margin-bottom: 12px; } body.is-hyves-skin .hof-quote__lbl { color: var(--hv-text-link); font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; margin-bottom: 4px; } body.is-hyves-skin .hof-quote__text { color: var(--hv-text); font-size: 13px; font-style: italic; line-height: 1.4; margin-bottom: 4px; } body.is-hyves-skin .hof-quote__by { color: var(--hv-text-soft); font-size: 11px; font-weight: 700; } /* ============================================================ Empty state — Hyvrr-style centered card ============================================================ */ body.is-hyves-skin .empty { background: var(--hv-card-bg); border: 1px solid var(--hv-card-border); border-radius: 10px; padding: 20px 16px; text-align: center; color: var(--hv-text-soft); } body.is-hyves-skin .empty .em-emoji { font-size: 28px; margin-bottom: 6px; } body.is-hyves-skin .empty h3 { font-family: var(--font-display); color: var(--hv-text); font-size: 14px; margin: 0 0 4px; } /* ============================================================ Mini chips on home (streak / new / login-rewards) Tighter retro look matching Hyvrr news-meta ============================================================ */ body.is-hyves-skin .home-mini-row { margin: 8px 0 12px; gap: 6px; } body.is-hyves-skin .new-chip { background: linear-gradient(to bottom, #fff8e0, #ffe9a8); border: 1px solid #d9b95a; color: #6b5a0a; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } body.is-hyves-skin .streak-chip { background: linear-gradient(to bottom, #fff, var(--hv-blue-pale-bot)); border: 1px solid var(--hv-card-border); color: var(--hv-text); font-size: 11px; padding: 3px 10px; border-radius: 999px; box-shadow: none; } body.is-hyves-skin .streak-chip__num { color: var(--hv-orange-bot) !important; font-weight: 900; } body.is-hyves-skin .streak-chip--hot { background: linear-gradient(to bottom, var(--hv-orange-top), var(--hv-orange-bot)); border-color: var(--hv-orange-deep); color: #fff; } body.is-hyves-skin .streak-chip--hot .streak-chip__num, body.is-hyves-skin .streak-chip--hot .streak-chip__lbl { color: #fff !important; } body.is-hyves-skin .login-rewards-chip { background: linear-gradient(to bottom, #fff, #fff7e8); border: 1px solid var(--hv-orange-bot); color: var(--hv-orange-deep); font-size: 11px; padding: 3px 10px; border-radius: 999px; } body.is-hyves-skin .login-rewards-chip.is-claimable { background: linear-gradient(to bottom, var(--hv-orange-top), var(--hv-orange-bot)); color: #fff; border-color: var(--hv-orange-deep); } /* ============================================================ Inputs (forms) — Hyvrr-style thin gray border ============================================================ */ body.is-hyves-skin input[type="text"], body.is-hyves-skin input[type="search"], body.is-hyves-skin input[type="email"], body.is-hyves-skin input[type="number"], body.is-hyves-skin input[type="date"], body.is-hyves-skin textarea, body.is-hyves-skin select { font-family: var(--font-sans); font-size: 12px; border: 1px solid #b8c8d8; border-radius: 4px; padding: 4px 8px; background: #fff; color: var(--hv-text); } body.is-hyves-skin input:focus, body.is-hyves-skin textarea:focus, body.is-hyves-skin select:focus { outline: 2px solid var(--hv-blue-media-top); outline-offset: -1px; border-color: var(--hv-blue-media-bot); } /* Experimental badge removed — Hyves-skin is now the live default. */ /* ============================================================ Profiles list (.member-grid + .member-card) Hyvrr news-card style: white tile, blue link-name, gradient thumb ============================================================ */ body.is-hyves-skin .member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 12px 0; } body.is-hyves-skin .member-card { background: #fff; border: 1px solid var(--hv-card-border); border-radius: 7px; padding: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; transition: filter .12s ease, border-color .12s ease; box-shadow: none; } body.is-hyves-skin .member-card:hover { filter: brightness(1.02); border-color: var(--hv-orange-bot); } body.is-hyves-skin .member-card:active { transform: none; } body.is-hyves-skin .member-card .avatar { width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--hv-card-border); margin-bottom: 6px; } body.is-hyves-skin .member-card .name { color: var(--hv-text-link) !important; font-weight: 700; font-size: 13px; font-family: var(--font-sans); text-decoration: none; } body.is-hyves-skin .member-card:hover .name { text-decoration: underline; } body.is-hyves-skin .member-card .leeftijd { font-size: 10px; color: var(--hv-text-soft); margin-top: 2px; text-transform: uppercase; letter-spacing: .3px; } body.is-hyves-skin .member-card .score-pill { margin-top: 6px; background: linear-gradient(to bottom, var(--hv-blue-pale-top), var(--hv-blue-pale-bot)); border: 1px solid var(--hv-blue-pale-line); color: var(--hv-text); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; box-shadow: none; } /* ============================================================ Single profile head — Hyvrr profile-card style ============================================================ */ body.is-hyves-skin .profile-head { background: #fff; border: 1px solid var(--hv-card-border); border-radius: 10px; padding: 0; margin-bottom: 12px; overflow: hidden; display: block; box-shadow: 0 1px 0 rgba(38, 56, 77, .04), 0 4px 10px rgba(38, 56, 77, .08); } body.is-hyves-skin .profile-head::before { content: "▸ Profiel"; display: block; background: linear-gradient(to bottom, var(--hv-blue-media-top), var(--hv-blue-media-bot)); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 6px 10px; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); } body.is-hyves-skin .profile-head > .avatar { display: inline-block; width: 70px; height: 70px; border: 2px solid var(--hv-card-border); border-radius: 8px; margin: 12px 0 12px 12px; vertical-align: top; box-shadow: 0 2px 4px rgba(38, 56, 77, .12); } body.is-hyves-skin .profile-head__main { display: inline-block; vertical-align: top; padding: 10px 12px 12px; width: calc(100% - 100px); min-width: 0; } body.is-hyves-skin .profile-head h1 { font-family: var(--font-display); color: var(--hv-text); font-weight: 700; font-size: 20px; letter-spacing: 0; margin: 0; line-height: 1.2; } body.is-hyves-skin .profile-head .specialty { font-size: 12px; color: var(--hv-text-soft); margin-top: 2px; } body.is-hyves-skin .profile-bio { margin: 8px 12px; background: linear-gradient(to bottom, var(--hv-blue-pale-top), var(--hv-blue-pale-bot)); border: 1px solid var(--hv-blue-pale-line); border-left: 3px solid var(--hv-orange-bot) !important; border-radius: 6px; padding: 6px 10px; font-size: 12px; color: var(--hv-text); line-height: 1.4; font-style: italic; } body.is-hyves-skin .profile-meta-line { font-size: 11px; color: var(--hv-text-soft); padding: 0 12px; margin: 4px 0; } body.is-hyves-skin .profile-head .meta-row { padding: 0 12px 10px; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } body.is-hyves-skin .profile-head .meta-row .chip, body.is-hyves-skin .profile-head .meta-row .pill { font-size: 10px; padding: 2px 8px; } @media (max-width: 480px) { body.is-hyves-skin .profile-head > .avatar { display: block; margin: 12px auto 4px; } body.is-hyves-skin .profile-head__main { display: block; width: auto; padding: 0 12px 12px; text-align: center; } body.is-hyves-skin .profile-head .meta-row { justify-content: center; } } /* ============================================================ Score-grid + score-tile — Hyvrr stat-blocks ============================================================ */ body.is-hyves-skin .score-grid { margin: 10px 0; gap: 6px; } body.is-hyves-skin .score-tile { background: linear-gradient(to bottom, var(--hv-blue-pale-top), var(--hv-blue-pale-bot)); border: 1px solid var(--hv-blue-pale-line); border-radius: 6px; padding: 8px 6px; } body.is-hyves-skin .score-tile .lbl { font-size: 9px; letter-spacing: .4px; color: var(--hv-text-link); font-weight: 700; text-transform: uppercase; } body.is-hyves-skin .score-tile .val { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0; color: var(--hv-text); } body.is-hyves-skin .score-tile.tile-age .val { color: var(--hv-orange-bot); } /* ============================================================ Profile tabs — Hyvrr-style with blue underline ============================================================ */ body.is-hyves-skin .tabs { border-bottom: 2px solid var(--hv-blue-media-bot); margin: 16px 0 10px; gap: 2px; } body.is-hyves-skin .tabs button { background: linear-gradient(to bottom, #fff, #e8eef5); border: 1px solid var(--hv-card-border); border-bottom: 0; border-radius: 6px 6px 0 0; padding: 6px 14px; font-size: 12px; font-weight: 700; font-family: var(--font-display); color: var(--hv-text-soft); margin-bottom: -1px; } body.is-hyves-skin .tabs button:hover { filter: brightness(1.03); color: var(--hv-text); } body.is-hyves-skin .tabs button[aria-selected="true"] { background: linear-gradient(to bottom, var(--hv-blue-media-top), var(--hv-blue-media-bot)); border-color: var(--hv-blue-media-line); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); } /* ============================================================ Profile-CTA banner — Hyvrr ad-card style ============================================================ */ body.is-hyves-skin .profile-cta { background: #fff; border: 1px solid var(--hv-orange-bot); border-left: 4px solid var(--hv-orange-bot); border-radius: 7px; padding: 8px 10px; margin: 8px 0 12px; box-shadow: none; } body.is-hyves-skin .profile-cta__title { font-family: var(--font-display); color: var(--hv-text); font-size: 13px; } body.is-hyves-skin .profile-cta__sub { color: var(--hv-text-soft); font-size: 11px; } body.is-hyves-skin .profile-cta__arrow { color: var(--hv-orange-bot); } /* ============================================================ Hyves-smiley picker — chunky retro grid ============================================================ */ body.is-hyves-skin .hv-smiley-trigger { background: linear-gradient(to bottom, #fff, #e8eef5); border: 1px solid var(--hv-card-border); width: 30px; height: 30px; border-radius: 6px; } body.is-hyves-skin .hv-smiley-picker { background: #fff; border: 1px solid var(--hv-orange-bot); border-radius: 7px; padding: 8px; grid-template-columns: repeat(7, 30px); gap: 4px; box-shadow: 4px 4px 0 rgba(244, 137, 34, .2), 0 12px 28px rgba(38, 56, 77, .25); } body.is-hyves-skin .hv-smiley-picker::before { content: "Smileys"; grid-column: 1 / -1; font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--hv-text-link); border-bottom: 1px solid var(--hv-card-border); padding-bottom: 4px; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .4px; } body.is-hyves-skin .hv-smiley-picker__item { width: 30px; height: 30px; border-radius: 4px; border: 1px solid transparent; } body.is-hyves-skin .hv-smiley-picker__item:hover { background: var(--hv-blue-pale-top); border-color: var(--hv-blue-pale-line); } /* ============================================================ Skin-toggle floating button — Hyvrr style ============================================================ */ body.is-hyves-skin .skin-toggle-float { background: linear-gradient(to bottom, var(--hv-orange-top), var(--hv-orange-bot)); color: #fff; border: 1px solid var(--hv-orange-deep); font-family: var(--font-display); font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); box-shadow: 0 6px 16px rgba(244, 137, 34, .35), inset 0 -2px 4px rgba(0, 0, 0, .08); } body.is-hyves-skin .skin-toggle-float:hover { filter: brightness(1.05); } /* ============================================================ Eredertiger-tier sparkle (kept from earlier — Goldmember vibe) ============================================================ */ body.is-hyves-skin .tier-5 .tier-badge, body.is-hyves-skin .tier-badge[data-tier="5"] { position: relative; } body.is-hyves-skin .tier-5 .tier-badge::after, body.is-hyves-skin .tier-badge[data-tier="5"]::after { content: "✨"; position: absolute; top: -8px; right: -8px; font-size: 16px; animation: hyvesGlitter 2.5s ease-in-out infinite; text-shadow: 0 0 4px gold; } @keyframes hyvesGlitter { 0%, 100% { transform: rotate(-12deg) scale(1); opacity: .9; } 50% { transform: rotate(12deg) scale(1.25); opacity: 1; } } /* ============================================================ Gentle background pattern — subtle diagonal stripes (low opacity, 2008 web 2.0 vibe) ============================================================ */ body.is-hyves-skin { background-image: repeating-linear-gradient(135deg, transparent 0 60px, rgba(38, 56, 77, .015) 60px 61px); background-attachment: fixed; } /* ============================================================ Mobile-first overrides — geen uitzoomen meer nodig ============================================================ */ /* Geen horizontal scroll, ooit — forceer met !important */ html, body { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; position: relative; } body.is-hyves-skin { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; } /* Universal cap voorkomen dat een child wider rendert dan zichzelf */ body.is-hyves-skin * { max-width: 100%; box-sizing: border-box; } body.is-hyves-skin img, body.is-hyves-skin canvas, body.is-hyves-skin video { max-width: 100% !important; height: auto; } /* Flex-children moeten kunnen shrinken (default min-width: auto = inhoud-min) */ body.is-hyves-skin .feed-item, body.is-hyves-skin .feed-item__body, body.is-hyves-skin .home-mini-row > *, body.is-hyves-skin .meta-row > * { min-width: 0; } /* Voorkom dat een lange tekst de page-width opduwt */ body.is-hyves-skin .feed-item__streek, body.is-hyves-skin .feed-item__roast, body.is-hyves-skin .comment-bubble__text, body.is-hyves-skin .info-slide__body, body.is-hyves-skin .notif-row__sub { word-wrap: break-word; overflow-wrap: anywhere; word-break: break-word; } /* < 1156px: bars 100% breed, kleine zij-margin */ @media (max-width: 1156px) { body.is-hyves-skin .topbar, body.is-hyves-skin .hv-blue-nav { max-width: calc(100% - 12px); margin-left: 6px; margin-right: 6px; } body.is-hyves-skin .main { padding-left: 8px; padding-right: 8px; } } /* Theme-toggle ALTIJD weg in Hyves — extra force, niet alleen display:none */ body.is-hyves-skin #theme-toggle { display: none !important; visibility: hidden !important; } /* < 640px (smartphone): topbar drastisch compact + blauwe nav verbergen */ @media (max-width: 640px) { body.is-hyves-skin .topbar { height: 38px; padding: 0 6px; margin-left: 4px; margin-right: 4px; max-width: calc(100% - 8px); border-radius: 6px; gap: 4px; } body.is-hyves-skin .topbar__brand { padding: 0; gap: 5px; flex-shrink: 1; min-width: 0; } body.is-hyves-skin .brand__mark { width: 22px; height: 22px; font-size: 10px; flex-shrink: 0; } body.is-hyves-skin .brand__wordmark { font-size: 15px; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; } /* Punten + guldens — alleen 'icon getal' */ body.is-hyves-skin .topbar__points, body.is-hyves-skin .topbar__coins { padding: 0 5px; height: 22px; font-size: 10px; gap: 2px; border-radius: 999px; flex-shrink: 0; } body.is-hyves-skin .topbar__points-emoji, body.is-hyves-skin .topbar__coins-emoji { font-size: 10px; } body.is-hyves-skin .iconbtn { width: 22px; height: 22px; flex-shrink: 0; } body.is-hyves-skin .iconbtn svg { width: 14px; height: 14px; } body.is-hyves-skin .topbar__actions { gap: 3px; flex-shrink: 0; } /* Info-knop verbergen op klein scherm — staat in sidemenu */ body.is-hyves-skin #info-toggle { display: none !important; } /* Blauwe nav blijft op mobile maar in compacter formaat. Items met desktop-only-flag verbergen we (bv. Leaderboard zit al in bottombar). */ body.is-hyves-skin .hv-blue-nav__inner { height: 30px; padding: 0 6px; gap: 0; } body.is-hyves-skin .hv-blue-nav__link { font-size: 12px; padding: 0 6px; } body.is-hyves-skin .hv-blue-nav__link--desktop-only, body.is-hyves-skin .hv-blue-nav__sep--desktop-only { display: none !important; } } /* Desktop only: verberg mobile-only items op breed scherm */ @media (min-width: 641px) { body.is-hyves-skin .hv-blue-nav__link--mobile-only, body.is-hyves-skin .hv-blue-nav__sep--mobile-only { display: none !important; } /* Cards compact */ body.is-hyves-skin .feed-item { padding: 6px 8px; gap: 8px; } body.is-hyves-skin .feed-item__streek { font-size: 12px; } } /* < 420px: extreem klein — verberg DERTIG-tekst, alleen 30-mark */ @media (max-width: 420px) { body.is-hyves-skin .brand__wordmark { display: none; } body.is-hyves-skin .topbar__points-num, body.is-hyves-skin .topbar__coins-num { font-size: 10px; } }