/* * Portal Berita Kampus — Theme System v4.0 * Tema aktif diterapkan melalui atribut data-theme pada elemen . */ html[data-theme] { --theme-focus: rgba(212, 95, 56, .24); --theme-surface: var(--white); --theme-card-radius: 0px; --theme-control-radius: 3px; --theme-border-width: 1px; } html[data-theme] body, html[data-theme] .site-header, html[data-theme] .site-nav-wrap, html[data-theme] .site-footer, html[data-theme] .news-card, html[data-theme] .module-card, html[data-theme] .category-tile, html[data-theme] .home-facility-strip a, html[data-theme] .staff-card, html[data-theme] .home-staff-card { transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease; } /* 01 — Editorial Kampus (tema bawaan) */ html[data-theme="editorial"] { --ink: #10283f; --ink-deep: #071a2b; --ink-soft: #29455d; --paper: #f5f1e8; --paper-deep: #ebe4d7; --white: #fffdf8; --accent: #d45f38; --accent-dark: #ad4324; --teal: #0f766e; --gold: #c39642; --line: #d9d2c5; --muted: #6e756f; --success: #1c7c54; --danger: #b53b35; --shadow: 0 20px 60px rgba(16, 40, 63, .12); --shadow-soft: 0 12px 36px rgba(16, 40, 63, .08); --radius: 18px; --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --serif: Georgia, "Times New Roman", serif; --theme-focus: rgba(212, 95, 56, .24); --theme-surface: #fffdf8; --theme-card-radius: 0px; --theme-control-radius: 3px; } /* 02 — Emerald Academic */ html[data-theme="emerald"] { --ink: #0d3b2e; --ink-deep: #05271d; --ink-soft: #315c50; --paper: #eef5ed; --paper-deep: #dfeadf; --white: #fbfdf8; --accent: #d28b24; --accent-dark: #a96812; --teal: #14866d; --gold: #c69b3c; --line: #cedbcf; --muted: #68776f; --success: #1b7553; --danger: #a9483f; --shadow: 0 24px 60px rgba(13, 59, 46, .13); --shadow-soft: 0 12px 34px rgba(13, 59, 46, .09); --radius: 24px; --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --serif: Palatino, "Palatino Linotype", Georgia, serif; --theme-focus: rgba(210, 139, 36, .26); --theme-surface: #fbfdf8; --theme-card-radius: 18px; --theme-control-radius: 999px; } html[data-theme="emerald"] body { background: radial-gradient(circle at 8% 12%, rgba(20, 134, 109, .06), transparent 30rem), var(--white); } html[data-theme="emerald"] .site-notice { background: linear-gradient(90deg, var(--ink-deep), var(--teal)); } html[data-theme="emerald"] .site-nav-wrap { background: linear-gradient(105deg, var(--ink-deep), var(--ink) 62%, #145844); } html[data-theme="emerald"] .brand__mark span { border-radius: 999px; } html[data-theme="emerald"] .button, html[data-theme="emerald"] .pagination__item, html[data-theme="emerald"] .module-search button, html[data-theme="emerald"] .module-search input, html[data-theme="emerald"] .search-panel input, html[data-theme="emerald"] .search-panel button { border-radius: var(--theme-control-radius); } html[data-theme="emerald"] .news-card, html[data-theme="emerald"] .module-card, html[data-theme="emerald"] .home-staff-card, html[data-theme="emerald"] .staff-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--theme-card-radius); background: var(--white); box-shadow: 0 12px 30px rgba(13, 59, 46, .055); } html[data-theme="emerald"] .news-card__body, html[data-theme="emerald"] .module-card__body { padding: 22px; } html[data-theme="emerald"] .news-card__media, html[data-theme="emerald"] .module-card__media, html[data-theme="emerald"] .hero-story__media, html[data-theme="emerald"] .module-detail__cover img, html[data-theme="emerald"] .article-cover img { border-radius: 18px; } html[data-theme="emerald"] .category-tile { border-radius: 18px; background: rgba(255, 255, 255, .62); } html[data-theme="emerald"] .home-gallery-grid a, html[data-theme="emerald"] .home-facility-strip, html[data-theme="emerald"] .home-facility-strip a, html[data-theme="emerald"] .module-info-card { border-radius: 16px; overflow: hidden; } html[data-theme="emerald"] .module-hero, html[data-theme="emerald"] .module-detail__header { background: radial-gradient(circle at 82% 10%, rgba(210, 139, 36, .22), transparent 24rem), linear-gradient(125deg, var(--ink-deep), var(--ink)); } /* 03 — Royal Blue Modern */ html[data-theme="royal"] { --ink: #153e90; --ink-deep: #0b245a; --ink-soft: #345a9a; --paper: #eef4ff; --paper-deep: #dce8fb; --white: #ffffff; --accent: #2f80ed; --accent-dark: #1766cc; --teal: #0c91a8; --gold: #f0a52b; --line: #d4e0f2; --muted: #64748b; --success: #14845d; --danger: #c23a4b; --shadow: 0 22px 58px rgba(21, 62, 144, .14); --shadow-soft: 0 10px 30px rgba(21, 62, 144, .09); --radius: 18px; --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --serif: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --theme-focus: rgba(47, 128, 237, .25); --theme-surface: #ffffff; --theme-card-radius: 16px; --theme-control-radius: 10px; } html[data-theme="royal"] body { background: linear-gradient(180deg, #f8fbff 0, #ffffff 34rem); } html[data-theme="royal"] .site-header { border-top: 4px solid var(--accent); box-shadow: 0 8px 28px rgba(21, 62, 144, .06); } html[data-theme="royal"] .masthead { min-height: 94px; } html[data-theme="royal"] .brand__text strong { letter-spacing: -.035em; } html[data-theme="royal"] .brand__mark { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: var(--paper); } html[data-theme="royal"] .brand__mark span { border-radius: 3px; } html[data-theme="royal"] .site-nav-wrap { background: linear-gradient(90deg, var(--ink-deep), var(--ink), #1f5ec4); } html[data-theme="royal"] .site-nav a { font-weight: 700; } html[data-theme="royal"] .section-heading h2, html[data-theme="royal"] .hero-story h1, html[data-theme="royal"] .module-hero h1, html[data-theme="royal"] .module-detail__header h1, html[data-theme="royal"] .article-header h1 { font-weight: 800; letter-spacing: -.055em; } html[data-theme="royal"] .button, html[data-theme="royal"] input, html[data-theme="royal"] textarea, html[data-theme="royal"] select, html[data-theme="royal"] .pagination__item { border-radius: var(--theme-control-radius); } html[data-theme="royal"] .news-card, html[data-theme="royal"] .module-card, html[data-theme="royal"] .category-tile, html[data-theme="royal"] .home-staff-card, html[data-theme="royal"] .staff-card { overflow: hidden; border: 1px solid rgba(21, 62, 144, .11); border-radius: var(--theme-card-radius); background: #fff; box-shadow: 0 12px 34px rgba(21, 62, 144, .07); } html[data-theme="royal"] .news-card__body, html[data-theme="royal"] .module-card__body { padding: 22px; } html[data-theme="royal"] .hero-story__media, html[data-theme="royal"] .news-card__media, html[data-theme="royal"] .module-card__media, html[data-theme="royal"] .home-gallery-grid a { border-radius: var(--theme-card-radius); } html[data-theme="royal"] .popular-panel, html[data-theme="royal"] .module-info-card, html[data-theme="royal"] .home-facility-strip { border-radius: var(--theme-card-radius); overflow: hidden; } html[data-theme="royal"] .module-hero, html[data-theme="royal"] .module-detail__header { background: radial-gradient(circle at 85% 20%, rgba(47, 128, 237, .58), transparent 28rem), linear-gradient(120deg, #071c49, #153e90); } /* 04 — Maroon Heritage */ html[data-theme="maroon"] { --ink: #5c1724; --ink-deep: #350b14; --ink-soft: #79434c; --paper: #f5efe7; --paper-deep: #e9decf; --white: #fffdf9; --accent: #b58a3a; --accent-dark: #8b6725; --teal: #6d6650; --gold: #b58a3a; --line: #d9cbb8; --muted: #766c64; --success: #557346; --danger: #9d2d38; --shadow: 0 22px 56px rgba(92, 23, 36, .13); --shadow-soft: 0 10px 30px rgba(92, 23, 36, .08); --radius: 4px; --sans: "Segoe UI", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif; --serif: "Palatino Linotype", Palatino, Georgia, serif; --theme-focus: rgba(181, 138, 58, .28); --theme-surface: #fffdf9; --theme-card-radius: 2px; --theme-control-radius: 2px; } html[data-theme="maroon"] body { background: linear-gradient(rgba(92, 23, 36, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 23, 36, .018) 1px, transparent 1px), var(--white); background-size: 28px 28px; } html[data-theme="maroon"] .site-notice { background: var(--accent); color: var(--ink-deep); } html[data-theme="maroon"] .site-notice button { color: var(--ink-deep); } html[data-theme="maroon"] .site-header { border-top: 5px solid var(--ink); } html[data-theme="maroon"] .site-nav-wrap { border-top: 3px double rgba(181, 138, 58, .62); border-bottom: 3px double rgba(181, 138, 58, .62); background: var(--ink); } html[data-theme="maroon"] .brand__mark span:nth-child(2) { background: var(--gold); } html[data-theme="maroon"] .brand__text strong, html[data-theme="maroon"] .section-heading h2, html[data-theme="maroon"] .hero-story h1, html[data-theme="maroon"] .module-hero h1, html[data-theme="maroon"] .module-detail__header h1, html[data-theme="maroon"] .article-header h1 { font-family: var(--serif); } html[data-theme="maroon"] .section-kicker, html[data-theme="maroon"] .eyebrow { letter-spacing: .2em; } html[data-theme="maroon"] .button, html[data-theme="maroon"] input, html[data-theme="maroon"] textarea, html[data-theme="maroon"] select, html[data-theme="maroon"] .pagination__item { border-radius: 0; } html[data-theme="maroon"] .news-card, html[data-theme="maroon"] .module-card, html[data-theme="maroon"] .home-staff-card, html[data-theme="maroon"] .staff-card, html[data-theme="maroon"] .category-tile { border-top: 2px solid var(--accent); } html[data-theme="maroon"] .hero-story__media, html[data-theme="maroon"] .module-card__media, html[data-theme="maroon"] .news-card__media { outline: 1px solid rgba(181, 138, 58, .42); outline-offset: -7px; } html[data-theme="maroon"] .popular-panel { border: 1px solid var(--accent); box-shadow: 8px 8px 0 rgba(181, 138, 58, .18); } html[data-theme="maroon"] .module-hero, html[data-theme="maroon"] .module-detail__header { background: linear-gradient(90deg, rgba(181, 138, 58, .12) 1px, transparent 1px), linear-gradient(120deg, var(--ink-deep), var(--ink)); background-size: 44px 100%, auto; } html[data-theme="maroon"] .site-footer { border-top: 5px solid var(--accent); } /* 05 — Violet Innovation */ html[data-theme="violet"] { --ink: #4c2a85; --ink-deep: #28134d; --ink-soft: #684c96; --paper: #f2effb; --paper-deep: #e5def5; --white: #ffffff; --accent: #8b5cf6; --accent-dark: #6d3de0; --teal: #0f9ea3; --gold: #e59b38; --line: #ddd5ef; --muted: #746c83; --success: #218162; --danger: #c23f67; --shadow: 0 26px 70px rgba(76, 42, 133, .16); --shadow-soft: 0 12px 36px rgba(76, 42, 133, .10); --radius: 28px; --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --serif: Georgia, "Times New Roman", serif; --theme-focus: rgba(139, 92, 246, .27); --theme-surface: #ffffff; --theme-card-radius: 22px; --theme-control-radius: 999px; } html[data-theme="violet"] body { background: radial-gradient(circle at 90% 8%, rgba(139, 92, 246, .10), transparent 34rem), radial-gradient(circle at 4% 42%, rgba(15, 158, 163, .07), transparent 30rem), #fff; } html[data-theme="violet"] .site-notice { background: linear-gradient(90deg, #6d3de0, #8b5cf6, #0f9ea3); } html[data-theme="violet"] .site-header { background: rgba(255, 255, 255, .94); box-shadow: 0 8px 34px rgba(76, 42, 133, .08); } html[data-theme="violet"] .brand__mark { padding: 8px; border-radius: 14px; background: linear-gradient(145deg, rgba(139, 92, 246, .14), rgba(15, 158, 163, .10)); } html[data-theme="violet"] .brand__mark span { border-radius: 999px; } html[data-theme="violet"] .site-nav-wrap { background: linear-gradient(105deg, var(--ink-deep), var(--ink), #6d3de0); } html[data-theme="violet"] .button, html[data-theme="violet"] input, html[data-theme="violet"] textarea, html[data-theme="violet"] select, html[data-theme="violet"] .pagination__item, html[data-theme="violet"] .module-search button { border-radius: var(--theme-control-radius); } html[data-theme="violet"] .news-card, html[data-theme="violet"] .module-card, html[data-theme="violet"] .home-staff-card, html[data-theme="violet"] .staff-card, html[data-theme="violet"] .category-tile { overflow: hidden; border: 1px solid rgba(76, 42, 133, .11); border-radius: var(--theme-card-radius); background: rgba(255, 255, 255, .92); box-shadow: 0 14px 42px rgba(76, 42, 133, .08); } html[data-theme="violet"] .news-card__body, html[data-theme="violet"] .module-card__body { padding: 22px; } html[data-theme="violet"] .hero-story__media, html[data-theme="violet"] .news-card__media, html[data-theme="violet"] .module-card__media, html[data-theme="violet"] .home-gallery-grid a, html[data-theme="violet"] .module-info-card, html[data-theme="violet"] .home-facility-strip { border-radius: var(--theme-card-radius); overflow: hidden; } html[data-theme="violet"] .hero-story__label, html[data-theme="violet"] .module-chip, html[data-theme="violet"] .module-card__featured { border-radius: 999px; } html[data-theme="violet"] .module-hero, html[data-theme="violet"] .module-detail__header { background: radial-gradient(circle at 80% 18%, rgba(139, 92, 246, .65), transparent 28rem), radial-gradient(circle at 18% 100%, rgba(15, 158, 163, .34), transparent 26rem), linear-gradient(125deg, #211040, #4c2a85); } html[data-theme="violet"] .site-footer { background: radial-gradient(circle at 85% 20%, rgba(139, 92, 246, .30), transparent 25rem), var(--ink-deep); } /* 06 — Graphite Minimal */ html[data-theme="graphite"] { --ink: #18181b; --ink-deep: #09090b; --ink-soft: #3f3f46; --paper: #f4f4f5; --paper-deep: #e4e4e7; --white: #ffffff; --accent: #18181b; --accent-dark: #000000; --teal: #52525b; --gold: #71717a; --line: #d4d4d8; --muted: #71717a; --success: #3f6f52; --danger: #9f3030; --shadow: none; --shadow-soft: none; --radius: 0px; --sans: Arial, Helvetica, ui-sans-serif, sans-serif; --serif: Arial, Helvetica, ui-sans-serif, sans-serif; --theme-focus: rgba(24, 24, 27, .20); --theme-surface: #ffffff; --theme-card-radius: 0px; --theme-control-radius: 0px; } html[data-theme="graphite"] body { background: #fff; } html[data-theme="graphite"] .site-notice { background: #18181b; } html[data-theme="graphite"] .site-header { border-top: 8px solid #18181b; border-bottom: 0; } html[data-theme="graphite"] .masthead { min-height: 88px; } html[data-theme="graphite"] .brand__mark { width: 35px; height: 35px; } html[data-theme="graphite"] .brand__mark span, html[data-theme="graphite"] .brand__mark span:nth-child(2) { background: #18181b; border-radius: 0; } html[data-theme="graphite"] .brand__text strong { text-transform: uppercase; letter-spacing: .08em; font-size: .88rem; } html[data-theme="graphite"] .brand__text small { letter-spacing: .04em; } html[data-theme="graphite"] .site-nav-wrap { border-top: 2px solid #18181b; border-bottom: 2px solid #18181b; background: #fff; } html[data-theme="graphite"] .site-nav a { color: #52525b; border-right: 1px solid #e4e4e7; border-bottom-width: 4px; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; } html[data-theme="graphite"] .site-nav a:hover, html[data-theme="graphite"] .site-nav a.is-active { color: #09090b; border-bottom-color: #18181b; } html[data-theme="graphite"] .search-toggle { color: #18181b; border-left: 2px solid #18181b; } html[data-theme="graphite"] .section-heading h2, html[data-theme="graphite"] .hero-story h1, html[data-theme="graphite"] .module-hero h1, html[data-theme="graphite"] .module-detail__header h1, html[data-theme="graphite"] .article-header h1 { font-weight: 900; letter-spacing: -.055em; } html[data-theme="graphite"] .section-kicker, html[data-theme="graphite"] .eyebrow { color: #52525b; } html[data-theme="graphite"] .button, html[data-theme="graphite"] input, html[data-theme="graphite"] textarea, html[data-theme="graphite"] select, html[data-theme="graphite"] .pagination__item, html[data-theme="graphite"] .news-card, html[data-theme="graphite"] .module-card, html[data-theme="graphite"] .category-tile, html[data-theme="graphite"] .home-staff-card, html[data-theme="graphite"] .staff-card { border-radius: 0; box-shadow: none; } html[data-theme="graphite"] .news-card, html[data-theme="graphite"] .module-card, html[data-theme="graphite"] .category-tile, html[data-theme="graphite"] .home-staff-card, html[data-theme="graphite"] .staff-card { border: 1px solid #d4d4d8; } html[data-theme="graphite"] .news-card__body, html[data-theme="graphite"] .module-card__body { padding: 20px; } html[data-theme="graphite"] .hero-story__media, html[data-theme="graphite"] .news-card__media, html[data-theme="graphite"] .module-card__media, html[data-theme="graphite"] .home-gallery-grid a { border: 1px solid #18181b; } html[data-theme="graphite"] .hero-story__media img, html[data-theme="graphite"] .news-card__media img, html[data-theme="graphite"] .module-card__media img, html[data-theme="graphite"] .home-gallery-grid img, html[data-theme="graphite"] .staff-card img, html[data-theme="graphite"] .home-staff-card img { filter: grayscale(.72); } html[data-theme="graphite"] .hero-story__media:hover img, html[data-theme="graphite"] .news-card__media:hover img, html[data-theme="graphite"] .module-card__media:hover img, html[data-theme="graphite"] .home-gallery-grid a:hover img, html[data-theme="graphite"] .staff-card:hover img, html[data-theme="graphite"] .home-staff-card:hover img { filter: grayscale(0); } html[data-theme="graphite"] .popular-panel { border: 2px solid #18181b; } html[data-theme="graphite"] .module-hero, html[data-theme="graphite"] .module-detail__header { background: #18181b; } html[data-theme="graphite"] .site-footer { border-top: 8px solid #52525b; background: #09090b; } /* Warna turunan untuk komponen yang pada tema asli memakai aksen editorial tetap */ html[data-theme] .article-content { color: var(--ink-soft); } html[data-theme] .popular-panel .section-kicker, html[data-theme] .popular-list__category, html[data-theme] .home-agenda-date span, html[data-theme] .social-links a, html[data-theme] .footer-contact > a:hover { color: color-mix(in srgb, var(--accent) 68%, white); } html[data-theme] .popular-list h3 a:hover { color: color-mix(in srgb, var(--accent) 52%, white); } html[data-theme] .page-hero--contact { background: linear-gradient(120deg, var(--ink-deep), var(--ink) 65%, var(--teal)); } html[data-theme] .hero-story__media--placeholder { background: radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--teal) 72%, white) 0 12%, transparent 13%), linear-gradient(135deg, var(--ink) 0 55%, var(--teal) 55%); } /* Fokus kontrol mengikuti tema */ html[data-theme] input:focus, html[data-theme] textarea:focus, html[data-theme] select:focus, html[data-theme] button:focus-visible, html[data-theme] a:focus-visible { outline: 3px solid var(--theme-focus); outline-offset: 2px; } /* Bar pratinjau tema untuk administrator */ .theme-preview-bar { position: relative; z-index: 150; background: #111827; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .16); } .theme-preview-bar__inner { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: .78rem; } .theme-preview-bar p { margin: 0; } .theme-preview-bar strong { color: #fbbf24; } .theme-preview-bar a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-weight: 700; } .theme-preview-bar a:hover { background: #fff; color: #111827; } /* Pemilih tema publik */ .theme-switcher { position: fixed; z-index: 140; right: 22px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-end; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .theme-switcher__toggle { min-height: 46px; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; background: #111827; color: #fff; box-shadow: 0 14px 38px rgba(15, 23, 42, .25); cursor: pointer; font-size: .75rem; font-weight: 800; } .theme-switcher__toggle:hover { transform: translateY(-1px); } .theme-switcher__icon { width: 20px; height: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; transform: rotate(12deg); } .theme-switcher__icon i { border-radius: 50%; background: #fff; } .theme-switcher__icon i:nth-child(2) { background: #8b5cf6; } .theme-switcher__icon i:nth-child(3) { background: #d28b24; } .theme-switcher__icon i:nth-child(4) { background: #0f9ea3; } .theme-switcher__panel { width: min(330px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 100px)); overflow: auto; margin-bottom: 12px; border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; color: #111827; box-shadow: 0 24px 70px rgba(15, 23, 42, .24); } .theme-switcher__header { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 18px 14px; border-bottom: 1px solid #e5e7eb; background: rgba(255, 255, 255, .97); } .theme-switcher__header strong { display: block; font-size: .92rem; } .theme-switcher__header small { display: block; margin-top: 2px; color: #6b7280; font-size: .68rem; } .theme-switcher__close { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f3f4f6; color: #111827; cursor: pointer; font-size: 1.1rem; } .theme-switcher__options { display: grid; gap: 6px; padding: 10px; } .theme-switcher__option { width: 100%; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #111827; text-align: left; cursor: pointer; } .theme-switcher__option:hover { background: #f7f7f8; } .theme-switcher__option.is-active { border-color: #111827; background: #f4f4f5; } .theme-switcher__swatches { height: 38px; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid rgba(17, 24, 39, .12); border-radius: 9px; } .theme-switcher__swatches i { display: block; } .theme-switcher__option strong { display: block; font-size: .77rem; line-height: 1.2; } .theme-switcher__option small { display: block; margin-top: 3px; color: #6b7280; font-size: .61rem; line-height: 1.25; } .theme-switcher__check { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #d1d5db; border-radius: 50%; color: transparent; font-size: .72rem; } .theme-switcher__option.is-active .theme-switcher__check { border-color: #111827; background: #111827; color: #fff; } .theme-switcher__footer { padding: 12px 18px 16px; border-top: 1px solid #e5e7eb; } .theme-switcher__reset { width: 100%; min-height: 38px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; color: #374151; cursor: pointer; font-size: .7rem; font-weight: 750; } .theme-switcher__reset:hover { border-color: #111827; color: #111827; } @media (max-width: 820px) { html[data-theme="royal"] .masthead, html[data-theme="graphite"] .masthead { min-height: 76px; } html[data-theme="graphite"] .site-nav-wrap { background: #fff; } html[data-theme="graphite"] .site-nav a { color: #18181b; border-right: 0; } html[data-theme="graphite"] .search-toggle { border-left: 0; border-top: 1px solid #d4d4d8; } } @media (max-width: 580px) { .theme-preview-bar__inner { padding-block: 8px; align-items: flex-start; } .theme-preview-bar__inner { flex-direction: column; gap: 6px; } .theme-switcher { right: 14px; bottom: 14px; } .theme-switcher__toggle { width: 46px; padding: 0; justify-content: center; } .theme-switcher__toggle > span:last-child { display: none; } .theme-switcher__panel { width: calc(100vw - 28px); } } @media (prefers-reduced-motion: reduce) { html[data-theme] body, html[data-theme] .site-header, html[data-theme] .site-nav-wrap, html[data-theme] .site-footer, .theme-switcher__toggle { transition: none; } } @media print { .theme-switcher, .theme-preview-bar { display: none !important; } }