/*! * IDDS Skin — "Kominfo" (Dinas Komunikasi & Informatika) * A technology-forward government skin layered on the IDDS core. Activated by * setting `theme_skin = kominfo`, which adds `.skin-kominfo` to and * loads this file after idds.css. Pair with the Kominfo brand preset * (teal-blue primary) applied via _brand-vars. * * Aesthetic: deep tech blue → cyan, subtle grid/circuit texture, glassy * surfaces, gradient accents, monospace metadata — 2026/2027 gov-tech feel. */ .skin-kominfo { /* Token overrides — cool, technological palette */ --idds-primary-h: 200; --idds-primary-s: 92%; --idds-primary-l: 42%; --idds-accent: #c9a227; --idds-radius-md: 14px; --idds-radius-lg: 18px; --idds-font-sans: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; --kmf-grad: linear-gradient(120deg, #0b4f75 0%, #0e7490 60%, #155e75 100%); --kmf-grid: rgba(8, 145, 178, 0.045); } /* Ambient tech grid on the page background ------------------------------- */ .skin-kominfo { background-color: var(--idds-bg); background-image: linear-gradient(var(--kmf-grid) 1px, transparent 1px), linear-gradient(90deg, var(--kmf-grid) 1px, transparent 1px); background-size: 44px 44px; background-attachment: fixed; } /* Header: glassy with a gradient hairline ------------------------------- */ .skin-kominfo header.primary, .skin-kominfo .idds-header { background: color-mix(in srgb, #ffffff 82%, transparent); backdrop-filter: saturate(1.5) blur(12px); border-bottom: 0; position: relative; } .skin-kominfo header.primary::after, .skin-kominfo .idds-header::after { content: none !important; display: none !important; } .skin-kominfo nav.menu { box-shadow: inset 0 -3px 0 var(--idds-primary, #0e7490) !important; } /* Gradient brand accents ------------------------------------------------- */ .skin-kominfo .idds-eyebrow { color: #0891b2; } .skin-kominfo .idds-btn--primary { background: var(--kmf-grad); border: 0; } .skin-kominfo .idds-btn--primary:hover { filter: brightness(1.05); } /* Cards: glassy surface + tech hover glow -------------------------------- */ .skin-kominfo .idds-card { background: color-mix(in srgb, #ffffff 88%, transparent); backdrop-filter: blur(6px); border-color: color-mix(in srgb, #0891b2 18%, var(--idds-border)); } .skin-kominfo .idds-card--hover:hover { border-color: #22d3ee; box-shadow: 0 14px 34px rgba(8, 145, 178, 0.22); } .skin-kominfo .idds-metric__icon { background: var(--kmf-grad); color: #fff; } /* Metadata / meta text in mono for a technical register ------------------ */ .skin-kominfo .idds-card__meta, .skin-kominfo .idds-broadcast__src { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; } /* Badges & chips: cyan tech tint ---------------------------------------- */ .skin-kominfo .idds-badge--primary { background: rgba(34, 211, 238, 0.16); color: #0e7490; } .skin-kominfo .idds-chip--active { background: var(--kmf-grad); border-color: transparent; } /* Footer: deep tech gradient -------------------------------------------- */ .skin-kominfo .idds-footer, .skin-kominfo footer.footer { background: radial-gradient(1200px 400px at 20% -20%, #0b4f75 0%, #071a2b 70%); color: #b9d6e6; } /* Section headings get a gradient underline accent ----------------------- */ .skin-kominfo h1, .skin-kominfo h2 { position: relative; } .skin-kominfo .idds-section > h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--kmf-grad); } /* Search bar: techy focus ring ------------------------------------------ */ .skin-kominfo .idds-search .idds-input:focus { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.28); }