/* Dokobero Helpdesk Portal - Bootstrap-driven, sharp shapes, primary #5f498e - Light/Dark via [data-theme="light|dark"] on */ :root { --doko-primary: #5f498e; --doko-primary-dark: #3d2a63; --doko-primary-light: #7b5fbf; --doko-bg: #ffffff; --doko-bg-soft: #f4f2f8; --doko-text: #15161a; --doko-header-text: #f4f2f8; --doko-muted: #6b6f7a; --doko-green: #b8d056; --doko-border: rgba(0, 0, 0, .10); --doko-breadcrumb-text: #15161a; --doko-accent-1: #c4b5de; --doko-accent-2: #7b5fbf; --doko-accent-3: #ede6f7; --doko-radius: 0.5rem; --doko-radius-lg: 0.85rem; --doko-shadow: 0 8px 24px rgba(0, 0, 0, .06); --doko-shadow-soft: 0 4px 12px rgba(0, 0, 0, .04); } html[data-theme="dark"] { --doko-primary: #7b5fbf; --doko-primary-dark: #5f498e; --doko-primary-light: #9b82d4; --doko-accent-1: rgba(196, 181, 222, .85); --doko-accent-2: rgba(123, 95, 191, .85); --doko-accent-3: rgba(237, 230, 247, .15); --doko-bg: #0f1116; --doko-bg-soft: #16132a; --doko-text: #e9ecf3; --doko-muted: #c1c7d6; --doko-border: rgba(255, 255, 255, .14); --doko-breadcrumb-text: #f4f2f8; --doko-shadow: 0 8px 24px rgba(0, 0, 0, .12); --doko-shadow-soft: 0 4px 12px rgba(0, 0, 0, .08); } body.app-body { background: var(--doko-bg); color: var(--doko-text); min-height: 100dvh; display: flex; flex-direction: column; } .app-container { max-width: 1180px; padding-left: 1.25rem; padding-right: 1.25rem; } a { color: inherit; } .text-muted { color: var(--doko-muted) !important; } :root, html[data-theme="light"], html[data-theme="dark"] { --bs-primary: var(--doko-primary); --bs-primary-rgb: 95, 73, 142; --bs-border-radius: var(--doko-radius); --bs-border-radius-sm: var(--doko-radius); --bs-border-radius-lg: var(--doko-radius-lg); --bs-border-radius-xl: var(--doko-radius-lg); --bs-border-radius-xxl: var(--doko-radius-lg); } .btn, .form-control, .dropdown-menu, .modal-content, .card { border-radius: var(--doko-radius) !important; } .btn:focus-visible, .form-control:focus, .dropdown-toggle:focus-visible { box-shadow: 0 0 0 .25rem rgba(95, 73, 142, .25) !important; } /* Subtle motion + polish */ a, button, .btn, .card, .nav-link, .dropdown-item, .form-control { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease; } @media (prefers-reduced-motion: reduce) { a, button, .btn, .card, .nav-link, .dropdown-item, .form-control { transition: none !important; } } /* Primary buttons — purple */ .btn-primary { background-color: var(--doko-primary) !important; border-color: var(--doko-primary) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--doko-primary-dark) !important; border-color: var(--doko-primary-dark) !important; } .btn-outline-primary { color: var(--doko-primary) !important; border-color: var(--doko-primary) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--doko-primary) !important; border-color: var(--doko-primary) !important; color: #fff !important; } a:not(.btn):not(.nav-link):not(.dropdown-item):not(.text-decoration-none):hover { color: var(--doko-primary); } /* Navbar */ .app-navbar { background: color-mix(in srgb, var(--doko-bg) 88%, transparent); border-bottom: 1px solid var(--doko-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: .55rem 0; } .app-brand-text { font-size: .95rem; font-weight: 650; } .app-logo-mark { width: 18px; height: 18px; border: 2px solid var(--doko-primary); position: relative; display: inline-block; clip-path: polygon(0 0, 85% 0, 100% 25%, 100% 100%, 0 100%); } .app-logo-mark::after { content: ""; position: absolute; inset: 3px; border: 2px solid var(--doko-primary); clip-path: polygon(0 0, 90% 0, 100% 30%, 100% 100%, 0 100%); opacity: .25; } .app-logo-mark--footer { width: 16px; height: 16px; } .app-navbar .nav-link { color: var(--doko-muted); font-weight: 400; font-size: .875rem; padding: .5rem .6rem; border-radius: var(--doko-radius); } .app-navbar .nav-link svg { opacity: .45; flex-shrink: 0; } .app-navbar .nav-link:hover, .app-navbar .nav-link:focus { color: var(--doko-text); background: color-mix(in srgb, var(--doko-primary) 5%, transparent); } .app-navbar .nav-link:hover svg, .app-navbar .nav-link:focus svg { opacity: .75; } } .app-icon svg { width: 18px; height: 18px; } /* Main spacing */ .app-main { flex: 1 0 auto; min-height: 60vh; padding-bottom: 1.25rem; } /* Hero */ .app-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(95, 73, 142, .06) 0%, rgba(95, 73, 142, .02) 100%), url('/img/map_pattern.png'); background-size: cover, 600px; background-position: center, center; border-bottom: 1px solid var(--doko-border); } .app-hero-shape { position: absolute; right: -40px; top: -60px; width: 320px; height: 320px; background: rgba(95, 73, 142, .06); border-radius: 50%; pointer-events: none; } html[data-theme="dark"] .app-hero { background: linear-gradient(180deg, rgba(95, 73, 142, .15) 0%, rgba(15, 17, 22, .95) 100%), url('/img/map_pattern.png'); background-size: cover, 600px; background-position: center, center; } html[data-theme="dark"] .app-hero-shape { background: rgba(95, 73, 142, .12); } .app-kicker { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: transparent; color: var(--doko-primary); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600; } .app-card-sharp { border: 1px solid var(--doko-border); background: var(--doko-bg); box-shadow: var(--doko-shadow-soft); } .app-card-tilt { position: relative; } .app-card-tilt::before { display: none; } html[data-theme="dark"] .app-card-tilt::before { display: none; } .app-input-sharp { border: 1px solid var(--doko-border); background: var(--doko-bg); color: var(--doko-text); } .app-input-sharp::placeholder { color: var(--doko-muted); } .app-btn-sharp { border-width: 1px; } .app-pill { border-radius: 999px !important; } .app-badge-sharp { font-weight: 500; } /* Footer */ .app-footer { flex-shrink: 0; background: var(--doko-bg); border-top: 1px solid var(--doko-border); position: relative; } .app-footer-accent { height: 2px; background: linear-gradient(90deg, var(--doko-primary) 0%, var(--doko-primary-light) 50%, var(--doko-primary) 100%); opacity: 0.5; } .app-footer-accent::after { display: none; } /* Modal */ .app-modal { border: 1px solid var(--doko-border); background: var(--doko-bg); color: var(--doko-text); } .app-consent-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; border: 1px solid var(--doko-border); background: var(--doko-bg-soft); } /* Dark mode improvements for Bootstrap controls */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .modal-content { background-color: var(--doko-bg); color: var(--doko-text); border-color: var(--doko-border); } html[data-theme="dark"] .dropdown-item { color: var(--doko-text); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background: rgba(255, 255, 255, .06); } html[data-theme="dark"] .navbar-toggler { border-color: var(--doko-border); } html[data-theme="dark"] .navbar-toggler-icon { filter: invert(1); opacity: .85; } /* Logo image */ .app-logo-img { /*width: 26px;*/ height: 40px; border-radius: 20%; object-fit: contain; display: inline-block; } .app-logo-img--footer { /*max-width: 250px;*/ /*height: auto;*/ /*width: auto;*/ /*margin-bottom: 10px;*/ } /* Cookie banner */ .app-cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1080; /* above most elements, below modal backdrop */ border: 1px solid var(--doko-border); background: var(--doko-bg); box-shadow: var(--doko-shadow); border-radius: var(--doko-radius) !important; } .app-cookie-banner__inner { max-width: 1180px; margin: 0 auto; padding: 14px 14px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } @media (max-width: 768px) { .app-cookie-banner__inner { grid-template-columns: 1fr; } .app-cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } } .app-cookie-banner__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } /* Subpage hero (about 25dvh) */ /* ========== PAGE HERO (full-width, above grid) ========== */ .app-page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--doko-border); background: url("../img/banner.png") no-repeat center center; background-size: cover; } .app-page-hero__container { max-width: 1400px; margin: 0 auto; padding: clamp(2.5rem, 7dvh, 4.5rem) 2rem; } @media (max-width: 991.98px) { .app-page-hero__container { padding: 1.25rem; } } .app-page-hero__title { color: var(--doko-header-text); font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 700; margin: 0 0 .25rem; line-height: 1.3; } .app-page-hero__subtitle { color: var(--doko-green); font-size: .9rem; margin: 0; max-width: 60ch; } /* ========== BREADCRUMB BAR (full-width, below hero) ========== */ .app-breadcrumb-bar { border-bottom: 1px solid var(--doko-border); background: var(--doko-accent-1); } .app-breadcrumb-bar__container { max-width: 1400px; margin: 0 auto; padding: .5rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } @media (max-width: 991.98px) { .app-breadcrumb-bar__container { padding: .5rem 1.25rem; } } .app-breadcrumb-bar__left { min-width: 0; } .app-breadcrumb-bar .breadcrumb { font-size: .82rem; } .app-breadcrumb-bar .breadcrumb a { color: var(--doko-primary); text-decoration: none; } .app-breadcrumb-bar .breadcrumb a:hover { color: var(--doko-primary-light) !important; text-decoration: underline; } .app-breadcrumb-bar__right { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--doko-primary); white-space: nowrap; flex-shrink: 0; } html[data-theme="dark"] .app-breadcrumb-bar { background: linear-gradient(180deg, color-mix(in srgb, var(--doko-primary) 10%, var(--doko-bg)) 0%, var(--doko-bg-soft) 100%); color: var(--doko-breadcrumb-text); } /* Breadcrumbs (legacy) */ .app-breadcrumb { --bs-breadcrumb-divider: "›"; font-size: .85rem; } .app-breadcrumb__link { color: var(--doko-primary-dark); text-decoration: none; } .app-breadcrumb__link:hover { color: var(--doko-muted); text-decoration: underline; } /* TOC */ .app-toc { border-left: 2px solid rgba(95, 73, 142, .25); padding-left: 12px; display: grid; gap: 6px; } .app-toc__item { font-size: .7rem !important; line-height: 1.4; } .app-toc__item--h3 { padding-left: 10px; } .app-toc__link { display: inline-block; /*font-size: .92rem;*/ font-size: .85rem !important; color: var(--doko-muted); text-decoration: none; } .app-toc__link:hover { color: var(--doko-text); text-decoration: underline; } .app-toc__link.is-active { color: var(--doko-primary); font-weight: 600; } /* Sticky TOC card on desktop */ @media (min-width: 992px) { .app-toc-sticky { position: sticky; top: 86px; /* below sticky navbar */ } } /* Accent line */ .app-navbar-accent { height: 2px; background: var(--doko-primary); opacity: 0.5; } @media (prefers-reduced-motion: reduce) { .app-navbar-accent { animation: none !important; } } /* Footer always dark */ .app-footer--dark { background: linear-gradient(180deg, #110e1e 0%, #160f28 100%); color: #e9ecf3; border-top: 1px solid rgba(255, 255, 255, .12); overflow: hidden; position: relative; } .app-footer--dark .text-muted { color: rgba(233, 236, 243, .70) !important; } .app-footer--dark .link-secondary { color: rgba(233, 236, 243, .78) !important; } .app-footer--dark .link-secondary:hover { color: #ffffff !important; } .app-footer--dark hr { border-color: rgba(255, 255, 255, .14) !important; } .app-footer--dark .app-footer-accent { background: var(--doko-primary); opacity: 0.4; } .app-footer--dark .app-footer-accent::after { display: none; } /* footer subtle decoration */ .app-footer--dark::before { content: ""; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px; /*background: rgba(95, 73, 142, .12);*/ border-radius: 50%; pointer-events: none; } /* Gentle entrance */ @keyframes app-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .app-hero .row, .app-page-hero__container { animation: app-fade-up .35s ease both; } @media (prefers-reduced-motion: reduce) { .app-hero .row, .app-page-hero__container { animation: none !important; } } /* Navbar shadow only after scroll */ .app-navbar--scrolled { box-shadow: 0 10px 24px rgba(0, 0, 0, .10); } html[data-theme="dark"] .app-navbar--scrolled { box-shadow: 0 12px 28px rgba(0, 0, 0, .38); } /* Back to top button */ .app-backtop { position: fixed; right: 18px; bottom: 18px; z-index: 1075; /* below modal (1055+backdrop), above content */ width: 44px; height: 44px; border: 1px solid var(--doko-border); background: color-mix(in srgb, var(--doko-bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px !important; box-shadow: var(--doko-shadow-soft); display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(6px) scale(.98); } .app-backtop svg { width: 18px; height: 18px; } .app-backtop.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .app-backtop:hover { transform: translateY(-1px) scale(1.02); box-shadow: var(--doko-shadow); } @media (prefers-reduced-motion: reduce) { .app-backtop { transition: none !important; } .app-backtop:hover { transform: none !important; } } /* If cookie banner is visible, lift the back-to-top button a bit */ .app-cookie-banner:not(.d-none) ~ .app-backtop { bottom: 96px; } @media (max-width: 768px) { .app-cookie-banner:not(.d-none) ~ .app-backtop { bottom: 130px; } } /* Scroll progress bar */ .app-scroll-progress { height: 3px; background: transparent; position: relative; overflow: hidden; } .app-scroll-progress__bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--doko-accent-2), var(--doko-primary), var(--doko-accent-1)); border-radius: 999px; box-shadow: 0 6px 14px rgba(95, 73, 142, .18); transform-origin: left; } /* Navbar brand readability */ .app-navbar .navbar-brand, .app-navbar .navbar-brand:hover, .app-navbar .navbar-brand:focus { color: var(--doko-text) !important; text-decoration: none; } .app-navbar .app-brand-text { color: var(--doko-text) !important; } /* Card hover: only clickable elements */ a.app-card-sharp:hover, a.app-card-sharp:focus, .app-card-link:hover, .app-card-link:focus { transform: translateY(-2px); box-shadow: var(--doko-shadow), inset 3px 0 0 var(--doko-primary); border-color: rgba(95, 73, 142, .30); background: color-mix(in srgb, var(--doko-bg) 95%, var(--doko-accent-1)); } a.app-card-sharp:active, .app-card-link:active { transform: translateY(-1px); box-shadow: var(--doko-shadow-soft), inset 3px 0 0 var(--doko-primary); } /* Non-clickable cards: subtle highlight on hover without moving */ .card.app-card-sharp:hover { border-color: color-mix(in srgb, var(--doko-border) 70%, var(--doko-primary)); } /* Hero background — handled per-element above */ /* Typography for rendered markdown/content */ .app-typography { line-height: 1.6; font-size: 1rem; } /* List items inside cards — no nested cards */ .app-list-item { display: block; padding: .75rem 0; border-bottom: 1px solid var(--doko-border); text-decoration: none; color: inherit; } .app-list-item:last-child { border-bottom: 0; padding-bottom: 0; } .app-list-item:first-child { padding-top: 0; } a.app-list-item:hover { color: var(--doko-primary); } /* Status dot indicator */ .app-status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .app-status-dot--ok { background: #22c55e; } .app-status-dot--warn { background: #f59e0b; } .app-status-dot--error { background: #ef4444; } .app-status-dot--muted { background: #9ca3af; } .app-typography > *:first-child { margin-top: 0 !important; } .app-typography > *:last-child { margin-bottom: 0 !important; } .app-typography h1, .app-typography h2, .app-typography h3, .app-typography h4 { color: var(--doko-text); font-weight: 700; letter-spacing: .2px; margin-top: 1.4rem; margin-bottom: .65rem; } .app-typography h2 { font-size: 1.2rem; } .app-typography h3 { font-size: 1.05rem; } .app-typography p { margin: .65rem 0; color: color-mix(in srgb, var(--doko-text) 88%, transparent); } .app-typography a { color: var(--doko-primary); text-decoration: underline; text-underline-offset: 3px; } .app-typography a:hover { color: color-mix(in srgb, var(--doko-primary) 80%, white); } .app-typography ul, .app-typography ol { padding-left: 1.25rem; margin: .65rem 0; } .app-typography li { margin: .25rem 0; } .app-typography code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .92em; padding: .12rem .35rem; border-radius: .5rem; background: color-mix(in srgb, var(--doko-bg-soft) 70%, var(--doko-accent-1)); border: 1px solid var(--doko-border); } .app-typography pre { padding: 1rem; border-radius: 1rem; overflow: auto; background: color-mix(in srgb, var(--doko-bg-soft) 85%, var(--doko-accent-1)); border: 1px solid var(--doko-border); box-shadow: var(--doko-shadow-soft); } .app-typography pre code { padding: 0; border: 0; background: transparent; } .app-typography blockquote { margin: .9rem 0; padding: .75rem 1rem; border-left: 3px solid color-mix(in srgb, var(--doko-primary) 70%, var(--doko-accent-1)); background: color-mix(in srgb, var(--doko-bg-soft) 80%, var(--doko-accent-1)); border-radius: 1rem; color: var(--doko-text); } .app-typography table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; } .app-typography th, .app-typography td { border: 1px solid var(--doko-border); padding: .5rem .6rem; } .app-typography th { background: color-mix(in srgb, var(--doko-bg-soft) 85%, var(--doko-accent-1)); text-align: left; } /* ========== 3-COLUMN DOC LAYOUT ========== */ .app-doc-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr) 200px; gap: 0; min-height: calc(100dvh - 60px); max-width: 1400px; margin: 0 auto; width: 100%; } @media (max-width: 1200px) { .app-doc-grid { grid-template-columns: 220px minmax(0, 1fr) 180px; } } @media (max-width: 991.98px) { .app-doc-grid { grid-template-columns: minmax(0, 1fr); } } .app-doc-sidebar { border-right: 1px solid var(--doko-border); padding: 1.5rem 1rem; top: 56px; min-height: calc(100dvh - 56px); /*position: sticky;*/ /*overflow-y: auto;*/ background: var(--doko-bg); } .app-doc-content { padding: 1.5rem 2rem; min-width: 0; } @media (max-width: 991.98px) { .app-doc-content { padding: 1.5rem 1.25rem; } } .app-doc-panel { border-left: 1px solid var(--doko-border); padding: 1.5rem 1rem; top: 56px; min-height: calc(100dvh - 56px); /*position: sticky;*/ /*overflow-y: auto;*/ background: var(--doko-bg); } /* ========== SIDEBAR NAV ========== */ .app-sidebar { position: sticky; top: 80px; } .app-sidebar__header { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--doko-muted); padding: 0 .5rem .75rem; } .app-sidebar__link { display: flex; align-items: center; gap: .5rem; padding: .5rem; border-radius: var(--doko-radius); font-size: .875rem; font-weight: 500; color: var(--doko-text); text-decoration: none; transition: background .15s, color .15s; } .app-sidebar__link svg { flex-shrink: 0; opacity: .55; } .app-sidebar__link:hover { background: var(--doko-bg-soft); color: var(--doko-primary); } .app-sidebar__link.is-active { background: color-mix(in srgb, var(--doko-primary) 10%, transparent); color: var(--doko-primary); } .app-sidebar__link.is-active svg { opacity: 1; } .app-sidebar__sub { padding-left: 1.75rem; margin-bottom: .25rem; } .app-sidebar__sublink { display: flex; align-items: center; justify-content: space-between; padding: .3rem .5rem; border-radius: var(--doko-radius); font-size: .8rem; color: var(--doko-muted); text-decoration: none; transition: background .15s, color .15s; } .app-sidebar__sublink:hover { background: var(--doko-bg-soft); color: var(--doko-text); } .app-sidebar__sublink.is-active { color: var(--doko-primary); font-weight: 600; } .app-sidebar__count { font-size: .7rem; color: var(--doko-muted); background: var(--doko-bg-soft); padding: 0 .4rem; border-radius: 8px; line-height: 1.5; } .app-sidebar__divider { height: 1px; background: var(--doko-border); margin: .75rem .5rem; } /* ========== WCAG PANEL ========== */ .app-wcag { position: sticky; top: 80px; } .app-wcag__header { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--doko-muted); margin-bottom: 1rem; } .app-wcag__group { margin-bottom: 1rem; } .app-wcag__label { font-size: .72rem; color: var(--doko-muted); margin-bottom: .35rem; } .app-wcag__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 .4rem; border: 1px solid var(--doko-border); border-radius: var(--doko-radius); background: var(--doko-bg); color: var(--doko-text); font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .app-wcag__btn:hover { border-color: var(--doko-primary); color: var(--doko-primary); } .app-wcag__btn.is-active { background: var(--doko-primary); border-color: var(--doko-primary); color: #fff; } .app-wcag__btn--icon { min-width: 36px; } .app-wcag__btn--full { width: 100%; gap: .4rem; font-weight: 500; } .app-wcag__btn--toggle { width: 44px; height: 24px; border-radius: 12px; padding: 2px; position: relative; } .app-wcag__toggle-dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--doko-muted); margin-left: -20px; transition: transform .2s, background .2s; } .app-wcag__btn--toggle.is-active { background: var(--doko-primary); border-color: var(--doko-primary); } .app-wcag__btn--toggle.is-active .app-wcag__toggle-dot { transform: translateX(20px); background: #fff; } /* ========== NAVBAR BUTTONS (unified) ========== */ .app-nav-icon-btn { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--doko-border); border-radius: var(--doko-radius); background: transparent; color: var(--doko-text); font-size: .82rem; font-weight: 500; padding: .3rem .65rem; text-decoration: none; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; } .app-nav-icon-btn:hover { border-color: var(--doko-primary); color: var(--doko-primary); background: color-mix(in srgb, var(--doko-primary) 6%, transparent); } .app-nav-icon-btn svg { flex-shrink: 0; opacity: .6; } /* ========== SOCIAL ICONS ========== */ .app-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .7); text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .app-social-icon:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .4); } /* ========== HIGH CONTRAST ========== */ html[data-high-contrast="true"] { --doko-text: #000000; --doko-bg: #ffffff; --doko-bg-soft: #f0f0f0; --doko-muted: #333333; --doko-border: rgba(0, 0, 0, .3); } html[data-high-contrast="true"][data-theme="dark"] { --doko-text: #ffffff; --doko-bg: #000000; --doko-bg-soft: #111111; --doko-muted: #cccccc; --doko-border: rgba(255, 255, 255, .4); } /* ========== FONT SIZE ========== */ html[data-font-size="sm"] .app-doc-content { font-size: .85rem; } html[data-font-size="lg"] .app-doc-content { font-size: 1.15rem; } /* ========== PRINT ========== */ @media print { .app-doc-sidebar, .app-doc-panel, .app-navbar, .app-footer, .app-backtop { display: none !important; } .app-doc-grid { grid-template-columns: 1fr !important; } .app-doc-content { padding: 0 !important; } }