/*
* artonlabs.css - public site styles (public layout, auth layout, public pages).
* Sections are scoped with :where(body[data-layout|data-page]) so they keep
* zero extra specificity and only apply where they used to be inlined.
*/
/* ==== Layout: templates/layouts/base_auth.html ==== */
/* Auth tokens match the public site and /backend/ so all surfaces read as one product. */
body:where([data-layout="auth"]) {
--primary-color: #2957ab;
--primary: #2957ab;
--primary-rgb: 41, 87, 171;
--bs-primary: #2957ab;
--bs-primary-rgb: 41, 87, 171;
--bs-link-color: #2957ab;
--bs-link-hover-color: #204485;
--secondary-color: #5b86d6;
--accent-ink: #ffffff;
--bg-color: #f3f5fa;
--text-main: #10151f;
--ink-2: #434e63;
--ink-3: #737f96;
--line: #e2e6f0;
--font-display: "Archivo", system-ui, sans-serif;
--font-body: "Public Sans", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
:where([data-layout="auth"]) h1, :where([data-layout="auth"]) h2, :where([data-layout="auth"]) h3, :where([data-layout="auth"]) h4, :where([data-layout="auth"]) h5, :where([data-layout="auth"]) h6 {
font-family: var(--font-display);
letter-spacing: -0.028em;
}
/* Ink color applies only to headings on the form side. The left panel has
a dark accent background, so headings there must stay light. */
:where([data-layout="auth"]) .auth-form-side h1, :where([data-layout="auth"]) .auth-form-side h2, :where([data-layout="auth"]) .auth-form-side h3, :where([data-layout="auth"]) .auth-form-side h4, :where([data-layout="auth"]) .auth-form-side h5, :where([data-layout="auth"]) .auth-form-side h6 {
color: var(--text-main);
}
:where([data-layout="auth"]) .auth-visual, :where([data-layout="auth"]) .auth-visual h1, :where([data-layout="auth"]) .auth-visual h2, :where([data-layout="auth"]) .auth-visual h3, :where([data-layout="auth"]) .auth-visual h4, :where([data-layout="auth"]) .auth-visual h5, :where([data-layout="auth"]) .auth-visual h6 { color: #ffffff; }
:where([data-layout="auth"]) .auth-visual p, :where([data-layout="auth"]) .auth-visual li, :where([data-layout="auth"]) .auth-visual span { color: rgba(255,255,255,.88); }
:where([data-layout="auth"]) .btn-primary {
--bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
--bs-btn-color: var(--accent-ink);
--bs-btn-hover-bg: color-mix(in srgb, var(--primary) 86%, #000);
--bs-btn-hover-border-color: color-mix(in srgb, var(--primary) 84%, #000);
--bs-btn-hover-color: var(--accent-ink);
--bs-btn-active-bg: color-mix(in srgb, var(--primary) 76%, #000);
--bs-btn-active-color: var(--accent-ink);
--bs-btn-focus-shadow-rgb: var(--primary-rgb);
}
:where([data-layout="auth"]) .form-control:focus, :where([data-layout="auth"]) .form-select:focus {
border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .15);
}
:where([data-layout="auth"]) a:focus-visible, :where([data-layout="auth"]) button:focus-visible, :where([data-layout="auth"]) .btn:focus-visible {
outline: 2px solid var(--primary); outline-offset: 2px;
}
body:where([data-layout="auth"]) {
font-family: var(--font-body);
background-color: var(--bg-color);
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
}
:where([data-layout="auth"]) .auth-container {
width: 100%;
max-width: 950px;
background: #fff;
display: flex;
border-radius: 2rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin: 1.5rem;
animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
:where([data-layout="auth"]) .auth-visual {
flex: 1;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
padding: 2.1rem;
display: none;
flex-direction: column;
justify-content: center;
color: #fff;
position: relative;
}
@media (min-width: 768px) {
:where([data-layout="auth"]) .auth-visual { display: flex; }
}
:where([data-layout="auth"]) .auth-visual::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url("https://www.transparenttextures.com/patterns/cubes.png");
opacity: 0.1;
}
:where([data-layout="auth"]) .auth-form-side {
flex: 1;
padding: 2.5rem 3rem;
display: flex;
flex-direction: column;
justify-content: center;
}
:where([data-layout="auth"]) .brand-logo {
font-weight: 700;
font-size: 1.4rem;
color: var(--primary-color);
text-decoration: none;
margin-bottom: 1.25rem;
display: flex;
align-items: center;
}
:where([data-layout="auth"]) .brand-logo i {
margin-right: 0.75rem;
font-size: 1.25rem;
}
:where([data-layout="auth"]) .auth-title {
font-weight: 700;
font-size: 1.25rem;
color: var(--text-main);
margin-bottom: 0.25rem;
}
:where([data-layout="auth"]) .auth-subtitle {
color: #64748b;
margin-bottom: 1.25rem;
font-size: 0.9rem;
}
:where([data-layout="auth"]) .form-label {
font-size: .87rem;
margin-bottom: 0px;
}
:where([data-layout="auth"]) .form-text {
margin-top: 3px;
font-size: .70rem;
}
:where([data-layout="auth"]) .form-control {
border-radius: 0.75rem;
padding: 0.35rem .75rem;
border: 1px solid #e2e8f0;
background-color: #f1f5f9;
transition: all 0.3s;
margin-top: 0px;
}
:where([data-layout="auth"]) .form-control:focus {
background-color: #fff;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}
:where([data-layout="auth"]) .btn-primary {
background-color: var(--primary-color);
border: none;
border-radius: 0.75rem;
padding: 0.65rem;
font-weight: 600;
letter-spacing: 0.025em;
transition: all 0.3s;
}
:where([data-layout="auth"]) .btn-primary:hover {
background-color: #4338ca;
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(13, 110, 253, 0.4);
}
:where([data-layout="auth"]) .auth-footer {
margin-top: 1.25rem;
text-align: center;
font-size: 0.875rem;
color: #64748b;
}
:where([data-layout="auth"]) .auth-footer a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
}
/* Standardized Premium Captcha */
:where([data-layout="auth"]) .captcha-wrapper {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 1rem;
padding: 0.875rem 1rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
:where([data-layout="auth"]) .captcha-wrapper:hover {
border-color: var(--primary-color);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}
:where([data-layout="auth"]) .captcha-label {
display: block;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
color: #64748b;
margin-bottom: 0.75rem;
letter-spacing: 0.05em;
}
:where([data-layout="auth"]) .captcha-container {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: #fff;
padding: 0.75rem;
border-radius: 0.75rem;
border: 1px dashed #cbd5e1;
}
:where([data-layout="auth"]) .captcha {
border-radius: 0.375rem;
height: 40px !important;
width: auto !important;
}
:where([data-layout="auth"]) input[name="captcha_1"] {
width: 100px !important;
height: 40px !important;
text-align: center;
font-weight: 800;
font-size: 1.1rem;
border-radius: 0.5rem !important;
border: 2px solid var(--primary-color) !important;
color: var(--primary-color) !important;
padding: 0 !important;
}
:where([data-layout="auth"]) #div_id_captcha label { display: none; }
/* ── Mobile: compact auth layout ── */
@media (max-width: 576px) {
body:where([data-layout="auth"]) { align-items: flex-start; }
:where([data-layout="auth"]) .auth-container {
margin: 0;
border-radius: 0;
min-height: 100vh;
box-shadow: none;
animation: none;
}
:where([data-layout="auth"]) .auth-form-side {
padding: 2rem 1.25rem;
}
:where([data-layout="auth"]) .auth-title { font-size: 1.3rem; }
:where([data-layout="auth"]) .auth-subtitle { font-size: 0.85rem; }
:where([data-layout="auth"]) input[name="captcha_1"] { width: 80px !important; font-size: 0.95rem !important; }
:where([data-layout="auth"]) .captcha-container { gap: 0.5rem; flex-wrap: wrap; justify-content: flex-start; }
}
@media (min-width: 577px) and (max-width: 767px) {
:where([data-layout="auth"]) .auth-form-side { padding: 2rem 2rem; }
}
/* ==== Layout: templates/layouts/base_public.html ==== */
/* Public tokens: single source of values for every page. The accent matches
/backend/ so the site and the admin read as one product. */
body:where([data-layout="public"]) {
--primary: #2957ab;
--primary-rgb: 41, 87, 171;
--bs-primary: #2957ab;
--bs-primary-rgb: 41, 87, 171;
--bs-link-color: #2957ab;
--bs-link-color-rgb: 41, 87, 171;
--bs-link-hover-color: #204485;
--accent-ink: #ffffff;
--accent-soft: #eaeef7;
--secondary: #5b86d6;
/* Second accent: green, balancing the brand blue. #0c8540 passes AA (4.7:1)
as text on white and as a background for white text. Use via .text-hijau etc. */
--hijau: #0c8540;
--hijau-rgb: 12, 133, 64;
--hijau-gelap: #096a33;
--hijau-soft: #e7f5ec;
--hijau-garis: #b9e2c8;
/* Bootstrap success uses the same green so .text-success and .text-hijau match. */
--bs-success: #0c8540;
--bs-success-rgb: 12, 133, 64;
--bs-success-text-emphasis: #096a33;
--bs-success-bg-subtle: #e7f5ec;
--bs-success-border-subtle: #b9e2c8;
/* Surfaces & borders */
--ink: #10151f;
--ink-2: #434e63;
--ink-3: #737f96;
--paper: #ffffff;
--sunken: #f3f5fa;
--line: #e2e6f0;
--dark: #111726;
--light: #f8fafc;
/* Status */
--good: #0f7a52;
--warn: #9a5b06;
--crit: #ad2a2a;
/* Type */
--font-display: "Archivo", system-ui, sans-serif;
--font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
/* Fluid type scale: the clamp middle term is always rem + vw, never pure vw,
so browser zoom and user font size still apply (WCAG 1.4.4).
Slope runs 360px -> 1920px, where .container stops growing. */
--fs-h1: clamp(2.3rem, 1.908rem + 1.744vw, 4rem); /* 36.8 → 64 */
--fs-h2: clamp(1.75rem, 1.554rem + 0.8718vw, 2.6rem); /* 28 → 41.6 */
--fs-h3: clamp(1.3rem, 1.219rem + 0.359vw, 1.65rem); /* 20.8 → 26.4 */
--fs-h4: clamp(1.1rem, 1.054rem + 0.2051vw, 1.3rem); /* 17.6 → 20.8 */
--fs-lead: clamp(1.062rem, 1.019rem + 0.1923vw, 1.25rem); /* 17 → 20 */
--fs-body: clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem);/* 16 → 18 */
/* Corner radius scale: five steps shared by every component. */
--r-xs: 6px; /* small badges, inline code */
--r-sm: 8px; /* inputs, small elements */
--r-md: 12px; /* buttons and images inside cards */
--r-lg: 16px; /* cards */
--r-xl: 22px; /* large panels/sections */
--r-pill: 999px; /* labels, chips, type badges */
}
body:where([data-layout="public"]) {
font-family: var(--font-body);
color: var(--ink-2);
background-color: var(--paper);
scroll-behavior: smooth;
}
:where([data-layout="public"]) h1, :where([data-layout="public"]) h2, :where([data-layout="public"]) h3, :where([data-layout="public"]) h4, :where([data-layout="public"]) h5, :where([data-layout="public"]) h6, :where([data-layout="public"]) .navbar-brand {
font-family: var(--font-display);
letter-spacing: -0.025em;
color: var(--ink);
text-wrap: balance;
}
:where([data-layout="public"]) .num, :where([data-layout="public"]) .tabular {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
/* Navbar */
:where([data-layout="public"]) .navbar {
backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.9);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
padding-top: 0.35rem !important;
padding-bottom: 0.35rem !important;
}
:where([data-layout="public"]) .navbar-transparent {
background: transparent !important;
backdrop-filter: none;
box-shadow: none !important;
}
:where([data-layout="public"]) .navbar-transparent .btn-light {
background: rgba(255,255,255,0.1) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.2);
}
:where([data-layout="public"]) .navbar-transparent .navbar-toggler-icon {
filter: invert(1) brightness(100);
}
:where([data-layout="public"]) .navbar-scrolled {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(12px) !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}
:where([data-layout="public"]) .navbar-scrolled .nav-link, :where([data-layout="public"]) .navbar-scrolled .navbar-brand {
color: #475569 !important;
}
:where([data-layout="public"]) .navbar-scrolled .btn-light {
background: #f8fafc !important;
color: #334155 !important;
border: none;
}
:where([data-layout="public"]) .navbar-brand { font-size: 1.3rem; }
:where([data-layout="public"]) .navbar-logo { height: 38px; width: auto; max-width: 140px; object-fit: contain; display: block; transition: height 0.3s; }
@media (max-width: 991.98px) {
:where([data-layout="public"]) .navbar-logo { height: 32px; }
}
:where([data-layout="public"]) .nav-link {
font-weight: 500;
color: #475569 !important;
padding: 0.5rem 1rem !important;
transition: color 0.2s;
font-size: 0.9rem;
}
:where([data-layout="public"]) .nav-link:hover, :where([data-layout="public"]) .nav-link.active { color: var(--primary) !important; }
:where([data-layout="public"]) .navbar-transparent .nav-link, :where([data-layout="public"]) .navbar-transparent .navbar-brand {
color: #fff !important;
}
/* Buttons */
:where([data-layout="public"]) .btn-premium {
background: var(--dark);
color: #fff;
padding: 0.6rem 1.75rem;
border-radius: 3rem;
font-weight: 600;
font-size: 0.85rem;
border: none;
transition: all 0.3s;
}
:where([data-layout="public"]) .btn-premium:hover {
background: var(--primary);
color: #fff;
box-shadow: 0 10px 20px -5px rgba(var(--primary-rgb), 0.3);
transform: translateY(-1px);
}
/* Footer */
:where([data-layout="public"]) footer {
background: var(--dark);
color: #94a3b8;
padding: 80px 0 40px;
}
:where([data-layout="public"]) footer h5 { color: #fff; font-weight: 700; margin-bottom: 1.5rem; font-size: 0.95rem; }
:where([data-layout="public"]) footer a { color: #94a3b8; text-decoration: none; transition: color 0.2s; }
:where([data-layout="public"]) footer a:hover { color: #fff; }
/* Mobile Styles */
@media (max-width: 991.98px) {
/* ── Side Drawer ── */
:where([data-layout="public"]) .navbar-collapse, :where([data-layout="public"]) .navbar-collapse.collapse, :where([data-layout="public"]) .navbar-collapse.collapsing {
display: flex !important;
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
width: min(86vw, 340px) !important;
height: 100vh !important;
flex-direction: column !important;
justify-content: flex-start;
align-items: flex-start;
/* Opaque background: translucency + blur lets page content show through
and hurts link legibility. */
background: var(--paper);
transform: translateX(100%);
will-change: transform;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
z-index: 1200;
overflow-y: auto !important;
padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) !important;
box-shadow: -18px 0 48px -24px rgba(16, 21, 31, .45);
border-left: 1px solid var(--line);
}
:where([data-layout="public"]) .navbar-collapse.show {
transform: translateX(0) !important;
}
:where([data-layout="public"]) .navbar-nav {
text-align: left;
width: 100%;
margin-top: 1rem;
}
:where([data-layout="public"]) .navbar-collapse li {
width: 100%;
}
/* No staggered entrance animation: brand and links are visible immediately. */
:where([data-layout="public"]) .navbar-collapse .nav-link, :where([data-layout="public"]) .navbar-collapse .navbar-brand {
opacity: 1; transform: none; transition: none;
color: var(--ink) !important;
}
:where([data-layout="public"]) .navbar-collapse .nav-link {
display: flex; align-items: center; gap: .6rem;
font-size: .98rem !important; font-weight: 500;
padding: .78rem .7rem !important;
border-radius: 9px;
transition: background .15s ease, color .15s ease;
}
:where([data-layout="public"]) .navbar-collapse .nav-link:hover, :where([data-layout="public"]) .navbar-collapse .nav-link:focus-visible { background: var(--sunken); }
:where([data-layout="public"]) .navbar-collapse .nav-link.active {
color: var(--primary) !important; background: var(--accent-soft);
font-weight: 600;
}
:where([data-layout="public"]) .navbar-collapse .nav-link i { width: 1.1rem; text-align: center; color: var(--ink-3); font-size: .9rem; }
:where([data-layout="public"]) .navbar-collapse .nav-link.active i { color: var(--primary); }
/* Drawer submenus are indented lists, not floating dropdowns that need
two taps on touch screens. */
:where([data-layout="public"]) .navbar-collapse .dropdown-menu {
position: static !important; float: none !important;
width: 100%; border: 0 !important; box-shadow: none !important;
padding: 0 0 .3rem 1.8rem !important; margin: 0 !important;
background: transparent !important;
}
:where([data-layout="public"]) .navbar-collapse .dropdown-item {
padding: .5rem .7rem !important; border-radius: 8px;
font-size: .9rem; color: var(--ink-2) !important;
}
:where([data-layout="public"]) .navbar-collapse .dropdown-item:hover { background: var(--sunken); }
:where([data-layout="public"]) .navbar-collapse .navbar-nav { gap: 2px; }
:where([data-layout="public"]) .drawer-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
:where([data-layout="public"]) .drawer-header .navbar-brand {
font-family: var(--font-display);
font-size: 1.05rem !important; font-weight: 700;
letter-spacing: -.02em; padding: 0 !important;
}
:where([data-layout="public"]) .drawer-header .btn-close {
opacity: .55; padding: .6rem; margin: -.6rem -.4rem -.6rem 0;
}
/* Action buttons sit at the bottom of the drawer, separated by a border. */
:where([data-layout="public"]) .navbar-collapse .nav-item:has(> .btn), :where([data-layout="public"]) .navbar-collapse .nav-item .btn {
width: 100%;
}
/* The menu list fills the drawer height so margin-top:auto can push
the last action button to the bottom. */
:where([data-layout="public"]) .navbar-collapse .navbar-nav {
margin-top: 2px !important; width: 100%;
flex: 1 1 auto; display: flex; flex-direction: column;
align-items: stretch !important;
}
:where([data-layout="public"]) .navbar-collapse .nav-item:last-child {
margin-top: auto !important; padding-top: 16px;
border-top: 1px solid var(--line);
}
/* Default btn-premium is dark and ignores the brand color. */
:where([data-layout="public"]) .navbar-collapse .btn-premium {
background: var(--primary) !important; border-color: var(--primary) !important;
color: var(--accent-ink) !important; border-radius: 9px !important;
font-weight: 600; padding: .7rem 1rem !important; box-shadow: none !important;
}
:where([data-layout="public"]) .navbar-collapse .btn-premium:hover {
background: color-mix(in srgb, var(--primary) 86%, #000) !important;
}
/* ── Bottom Navigation ── */
:where([data-layout="public"]) .bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-around;
align-items: center;
z-index: 1100;
padding-bottom: calc(env(safe-area-inset-bottom) + 5px);
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
}
:where([data-layout="public"]) .bottom-nav-item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: #94a3b8;
font-size: 0.7rem;
font-weight: 600;
transition: all 0.2s;
}
:where([data-layout="public"]) .bottom-nav-item i {
font-size: 1.2rem;
margin-bottom: 4px;
}
:where([data-layout="public"]) .bottom-nav-item.active {
color: var(--primary);
}
/* ── Drawer Backdrop ── */
/* Darker backdrop so the drawer stands out. */
:where([data-layout="public"]) .drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(4px);
z-index: 1150;
opacity: 0;
visibility: hidden;
transition: opacity 0.28s ease, visibility 0.28s ease;
}
body:where([data-layout="public"]).menu-open .drawer-backdrop {
opacity: 1;
visibility: visible;
}
body:where([data-layout="public"]).menu-open .navbar {
z-index: 1300 !important;
}
body:where([data-layout="public"]) { padding-bottom: 85px; }
/* .navbar-toggler is now visible */
}
@media (min-width: 992px) {
:where([data-layout="public"]) .bottom-nav, :where([data-layout="public"]) .drawer-backdrop { display: none !important; }
}
/* Prevent scroll when mobile menu is open */
body:where([data-layout="public"]).menu-open { overflow: hidden; }
/* ── Mobile: reduce footer padding ── */
@media (max-width: 767.98px) {
:where([data-layout="public"]) footer { padding: 40px 0 24px !important; }
:where([data-layout="public"]) footer h5 { margin-bottom: 0.75rem; font-size: 0.9rem; }
:where([data-layout="public"]) footer p, :where([data-layout="public"]) footer a { font-size: 0.875rem; }
}
/* Container widths beyond Bootstrap: one fixed width per breakpoint, adding
1600 -> 1400 and 1920 -> 1500. Steps stay small so wide screens keep
side margins and a comfortable line length. */
@media (min-width: 1600px) {
:where([data-layout="public"]) .container, :where([data-layout="public"]) .container-sm, :where([data-layout="public"]) .container-md, :where([data-layout="public"]) .container-lg, :where([data-layout="public"]) .container-xl, :where([data-layout="public"]) .container-xxl {
max-width: 1400px;
}
}
@media (min-width: 1920px) {
:where([data-layout="public"]) .container, :where([data-layout="public"]) .container-sm, :where([data-layout="public"]) .container-md, :where([data-layout="public"]) .container-lg, :where([data-layout="public"]) .container-xl, :where([data-layout="public"]) .container-xxl {
max-width: 1500px;
}
}
/* ── Mobile: container & section spacing ── */
@media (max-width: 767.98px) {
:where([data-layout="public"]) .container { padding-left: 1rem; padding-right: 1rem; }
/* Prevent horizontal scroll caused by oversized elements */
:where([data-layout="public"]) img, :where([data-layout="public"]) video, :where([data-layout="public"]) iframe { max-width: 100%; height: auto; }
}
/* ── Mobile: navbar brand font size ── */
@media (max-width: 575.98px) {
:where([data-layout="public"]) .navbar-brand { font-size: 1.1rem !important; }
}
/* Push Notification Button */
/* [hidden] only sets display:none in the UA stylesheet and Bootstrap's
d-flex !important overrides it; this keeps the bell hidden. */
:where([data-layout="public"]) #push-notification-btn[hidden] { display: none !important; }
:where([data-layout="public"]) #push-notification-btn {
font-size: 0.85rem;
transition: all 0.3s ease;
}
:where([data-layout="public"]) #push-notification-btn.active {
color: var(--primary) !important;
background: rgba(var(--primary-rgb), 0.1) !important;
border-color: rgba(var(--primary-rgb), 0.2);
}
:where([data-layout="public"]) .navbar-transparent #push-notification-btn.active {
color: #fff !important;
background: var(--primary) !important;
box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.5);
}
/* Back-to-top button: bottom-left, small and semi-transparent; opaque on hover. */
:where([data-layout="public"]) #back-to-top {
position: fixed;
bottom: 18px;
left: 30px;
width: 34px;
height: 34px;
font-size: .72rem;
background: var(--primary);
color: #fff;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, transform .25s ease, background .25s ease;
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}
:where([data-layout="public"]) #back-to-top.show {
opacity: .38;
visibility: visible;
}
:where([data-layout="public"]) #back-to-top:hover {
transform: scale(1.1);
opacity: 1;
background: var(--dark);
}
:where([data-layout="public"]) #back-to-top:focus-visible { opacity: 1; }
@media (max-width: 991.98px) {
:where([data-layout="public"]) #back-to-top {
bottom: 78px;
left: 20px;
width: 30px;
height: 30px;
}
}
/* Accent layer: Bootstrap compiles component colors as literals (#0d6efd), so
overriding --bs-primary alone misses buttons, pagination and form controls. */
:where([data-layout="public"]) .btn-primary {
--bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
--bs-btn-color: var(--accent-ink);
--bs-btn-hover-bg: color-mix(in srgb, var(--primary) 86%, #000);
--bs-btn-hover-border-color: color-mix(in srgb, var(--primary) 84%, #000);
--bs-btn-hover-color: var(--accent-ink);
--bs-btn-active-bg: color-mix(in srgb, var(--primary) 76%, #000);
--bs-btn-active-border-color: color-mix(in srgb, var(--primary) 74%, #000);
--bs-btn-active-color: var(--accent-ink);
--bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary);
--bs-btn-focus-shadow-rgb: var(--primary-rgb);
}
:where([data-layout="public"]) .btn-outline-primary {
--bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary);
--bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary);
--bs-btn-hover-color: var(--accent-ink);
--bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary);
--bs-btn-active-color: var(--accent-ink);
--bs-btn-focus-shadow-rgb: var(--primary-rgb);
}
:where([data-layout="public"]) .btn-link { --bs-btn-color: var(--primary); --bs-btn-hover-color: var(--bs-link-hover-color); }
:where([data-layout="public"]) .form-control:focus, :where([data-layout="public"]) .form-select:focus {
border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .15);
}
:where([data-layout="public"]) .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
:where([data-layout="public"]) .page-link { color: var(--primary); }
:where([data-layout="public"]) .page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); }
:where([data-layout="public"]) .nav-pills .nav-link.active { background-color: var(--primary); }
:where([data-layout="public"]) a:focus-visible, :where([data-layout="public"]) button:focus-visible, :where([data-layout="public"]) .btn:focus-visible, :where([data-layout="public"]) .form-control:focus-visible, :where([data-layout="public"]) .form-select:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* The off-canvas drawer (fixed + translateX(100%)) still widens the document
in Chrome. Use clip, not hidden: hidden creates a scroll container and
breaks position:sticky. */
@media (max-width: 991.98px) {
html:where(:has(> [data-layout="public"])), body:where([data-layout="public"]) { overflow-x: clip; }
}
/* Editorial layer: large tight headings, light grey page with white cards,
one sparing accent, generous section spacing. */
body:where([data-layout="public"]) { background-color: var(--sunken); }
/* White surfaces stay white on the grey background */
:where([data-layout="public"]) .card, :where([data-layout="public"]) .article-card, :where([data-layout="public"]) .page-content-section, :where([data-layout="public"]) .bg-white, :where([data-layout="public"]) .navbar, :where([data-layout="public"]) .modal-content, :where([data-layout="public"]) .dropdown-menu { background-color: var(--paper); }
:where([data-layout="public"]) h1 { font-size: var(--fs-h1); font-weight: 600; line-height: 1.04; letter-spacing: -.038em; }
:where([data-layout="public"]) h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -.032em; }
:where([data-layout="public"]) h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.022em; }
:where([data-layout="public"]) h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.015em; }
/* ── Reading column: article body, static pages, product descriptions ── */
:where([data-layout="public"]) .article-card .post-body, :where([data-layout="public"]) #article-body .post-body, :where([data-layout="public"]) .page-content-section .col-lg-9, :where([data-layout="public"]) .product-body, :where([data-layout="public"]) .prose {
font-size: var(--fs-body);
line-height: 1.75;
color: var(--ink-2);
}
:where([data-layout="public"]) .article-card .post-body, :where([data-layout="public"]) .page-content-section .page-body, :where([data-layout="public"]) .product-body, :where([data-layout="public"]) .prose { max-width: none; }
:where([data-layout="public"]) .article-card .post-body > p, :where([data-layout="public"]) .article-card .post-body > ul, :where([data-layout="public"]) .article-card .post-body > ol, :where([data-layout="public"]) .article-card .post-body > h2, :where([data-layout="public"]) .article-card .post-body > h3, :where([data-layout="public"]) .article-card .post-body > blockquote, :where([data-layout="public"]) .page-content-section .page-body > p, :where([data-layout="public"]) .page-content-section .page-body > ul, :where([data-layout="public"]) .page-content-section .page-body > ol, :where([data-layout="public"]) .page-content-section .page-body > h2, :where([data-layout="public"]) .page-content-section .page-body > h3, :where([data-layout="public"]) .page-content-section .page-body > blockquote, :where([data-layout="public"]) .page-content-section .col-lg-9 > p, :where([data-layout="public"]) .page-content-section .col-lg-9 > ul, :where([data-layout="public"]) .product-body > p, :where([data-layout="public"]) .product-body > ul, :where([data-layout="public"]) .product-body > ol, :where([data-layout="public"]) .prose > p, :where([data-layout="public"]) .prose > ul, :where([data-layout="public"]) .prose > ol {
/* No reading-width cap: line length is limited only by the column width. */
max-width: none;
}
/* Static pages set their own .page-body font size; align body text with the
shared scale here. */
:where([data-layout="public"]) .page-content-section .page-body, :where([data-layout="public"]) .page-content-section .page-body p, :where([data-layout="public"]) .page-content-section .page-body li { font-size: var(--fs-body); line-height: 1.75; }
:where([data-layout="public"]) .article-card .post-body > p, :where([data-layout="public"]) .page-content-section .col-lg-9 p, :where([data-layout="public"]) .product-body > p, :where([data-layout="public"]) .prose > p { margin-bottom: 1.35rem; }
/* Tables and figures may span the full column */
:where([data-layout="public"]) .article-card .post-body table, :where([data-layout="public"]) .page-content-section .col-lg-9 table, :where([data-layout="public"]) .product-body table, :where([data-layout="public"]) .prose table, :where([data-layout="public"]) .article-card .post-body > figure, :where([data-layout="public"]) .page-content-section .col-lg-9 > figure {
max-width: none; width: 100%;
}
:where([data-layout="public"]) .article-card .post-body h2, :where([data-layout="public"]) .page-content-section .col-lg-9 h2, :where([data-layout="public"]) .product-body h2, :where([data-layout="public"]) .prose h2 {
margin: 2.75rem 0 1rem;
font-size: clamp(1.5rem, 1.396rem + 0.4615vw, 1.95rem);
scroll-margin-top: 96px;
}
:where([data-layout="public"]) .article-card .post-body h3, :where([data-layout="public"]) .page-content-section .col-lg-9 h3, :where([data-layout="public"]) .product-body h3, :where([data-layout="public"]) .prose h3 { margin: 2rem 0 .75rem; scroll-margin-top: 96px; }
:where([data-layout="public"]) .article-card .post-body ul, :where([data-layout="public"]) .article-card .post-body ol, :where([data-layout="public"]) .page-content-section .col-lg-9 ul, :where([data-layout="public"]) .page-content-section .col-lg-9 ol, :where([data-layout="public"]) .product-body ul, :where([data-layout="public"]) .product-body ol, :where([data-layout="public"]) .prose ul, :where([data-layout="public"]) .prose ol {
max-width: 68ch; padding-left: 1.25rem; margin-bottom: 1.35rem;
}
:where([data-layout="public"]) .article-card .post-body li, :where([data-layout="public"]) .page-content-section .col-lg-9 li, :where([data-layout="public"]) .product-body li, :where([data-layout="public"]) .prose li { margin-bottom: .5rem; }
:where([data-layout="public"]) .article-card .post-body img, :where([data-layout="public"]) .page-content-section .col-lg-9 img, :where([data-layout="public"]) .product-body img, :where([data-layout="public"]) .prose img {
max-width: 100%; height: auto; border-radius: 12px;
border: 1px solid var(--line); margin: 1.5rem 0;
}
:where([data-layout="public"]) .article-card .post-body table, :where([data-layout="public"]) .page-content-section .col-lg-9 table, :where([data-layout="public"]) .product-body table, :where([data-layout="public"]) .prose table {
width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem;
}
:where([data-layout="public"]) .article-card .post-body th, :where([data-layout="public"]) .page-content-section .col-lg-9 th, :where([data-layout="public"]) .product-body th, :where([data-layout="public"]) .prose th {
background: var(--sunken); text-align: left; font-weight: 600; color: var(--ink);
}
:where([data-layout="public"]) .article-card .post-body th, :where([data-layout="public"]) .article-card .post-body td, :where([data-layout="public"]) .page-content-section .col-lg-9 th, :where([data-layout="public"]) .page-content-section .col-lg-9 td, :where([data-layout="public"]) .product-body th, :where([data-layout="public"]) .product-body td, :where([data-layout="public"]) .prose th, :where([data-layout="public"]) .prose td {
border: 1px solid var(--line); padding: .6rem .75rem;
}
:where([data-layout="public"]) .article-card .post-body blockquote, :where([data-layout="public"]) .page-content-section .col-lg-9 blockquote, :where([data-layout="public"]) .prose blockquote {
margin: 1.75rem 0; padding: .25rem 0 .25rem 1.25rem;
border-left: 3px solid var(--primary);
color: var(--ink); font-size: 1.1rem;
}
:where([data-layout="public"]) .article-card .post-body code, :where([data-layout="public"]) .page-content-section .col-lg-9 code, :where([data-layout="public"]) .product-body code, :where([data-layout="public"]) .prose code {
font-family: var(--font-mono); font-size: .88em;
background: var(--sunken); border: 1px solid var(--line);
border-radius: 5px; padding: .1rem .35rem;
}
:where([data-layout="public"]) .article-card .post-body pre, :where([data-layout="public"]) .prose pre {
background: var(--dark); color: #e8ecf6; border-radius: 12px;
padding: 1.1rem 1.25rem; overflow-x: auto; margin: 1.5rem 0;
}
:where([data-layout="public"]) .article-card .post-body pre code, :where([data-layout="public"]) .prose pre code {
background: none; border: 0; padding: 0; color: inherit;
}
/* ── Section rhythm: generous vertical spacing ── */
:where([data-layout="public"]) .section-wrap { padding-block: clamp(56px, 7vw, 104px) !important; }
/* ── Buttons: one shape across the site ── */
:where([data-layout="public"]) .btn { border-radius: 8px; font-weight: 600; }
:where([data-layout="public"]) .btn-lg { padding: .8rem 1.5rem; font-size: 1rem; }
:where([data-layout="public"]) .btn.rounded-pill { border-radius: 999px; }
/* Alternating two-column rows: image on one side, text on the other,
flipped on even rows. Markup:
*/
:where([data-layout="public"]) .alt-rows {
max-width: none; width: 100%;
display: flex; flex-direction: column;
gap: clamp(44px, 6vw, 86px);
margin: clamp(36px, 5vw, 64px) 0;
}
:where([data-layout="public"]) .alt-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(24px, 4vw, 56px);
align-items: center;
}
:where([data-layout="public"]) .alt-row > figure { margin: 0; min-width: 0; text-align: center; }
:where([data-layout="public"]) .alt-row > figure img {
/* Phone screenshots (9:19.5) need a max height or a row grows to ~650px. */
margin: 0 !important; max-width: 100%; width: auto; height: auto;
max-height: 460px;
border-radius: 16px !important; border: 1px solid var(--line) !important;
}
:where([data-layout="public"]) .alt-row > div { min-width: 0; }
:where([data-layout="public"]) .alt-row h3 { margin: 0 0 .6rem !important; }
:where([data-layout="public"]) .alt-row p { margin: 0; max-width: 26rem; }
/* Even rows: image moves right without changing markup order, so screen
readers still read image then text. */
:where([data-layout="public"]) .alt-row:nth-child(even) > figure { order: 2; }
@media (max-width: 767.98px) {
:where([data-layout="public"]) .alt-row { grid-template-columns: 1fr; gap: 20px; }
:where([data-layout="public"]) .alt-row:nth-child(even) > figure { order: 0; }
:where([data-layout="public"]) .alt-row > figure img { max-width: 240px; }
:where([data-layout="public"]) .alt-row p { max-width: none; }
}
/* Footer: page-colored background with a thin top border, brand block left,
small muted link columns right, one quiet legal row. */
:where([data-layout="public"]) .site-footer {
background: var(--sunken);
border-top: 1px solid var(--line);
color: var(--ink-2);
padding-block: clamp(48px, 6vw, 80px) 28px;
margin-top: clamp(48px, 6vw, 88px);
}
:where([data-layout="public"]) .footer-grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
gap: clamp(28px, 3.5vw, 52px);
}
:where([data-layout="public"]) .footer-logo {
display: inline-flex; align-items: center; gap: .55rem;
font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
color: var(--ink); text-decoration: none; letter-spacing: -.02em;
}
:where([data-layout="public"]) .footer-logo img { max-width: 34px; max-height: 34px; object-fit: contain; }
:where([data-layout="public"]) .footer-desc {
margin: 1rem 0 1.25rem; font-size: .92rem; line-height: 1.65;
color: var(--ink-3); max-width: 34ch;
}
:where([data-layout="public"]) .footer-social { display: flex; gap: .5rem; }
:where([data-layout="public"]) .footer-social a {
width: 34px; height: 34px; border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); background: var(--paper);
color: var(--ink-3); font-size: .85rem; text-decoration: none;
transition: color .18s, border-color .18s;
}
:where([data-layout="public"]) .footer-social a:hover { color: var(--primary); border-color: var(--primary); }
:where([data-layout="public"]) .footer-col h2 {
font-family: var(--font-body);
font-size: .82rem; font-weight: 600; letter-spacing: 0;
color: var(--ink-3);
margin: 0 0 .85rem; padding-bottom: .6rem;
border-bottom: 1px solid var(--line); /* heading underline */
}
:where([data-layout="public"]) .footer-col ul { list-style: none; margin: 0; padding: 0; }
:where([data-layout="public"]) .footer-col li { margin-bottom: .55rem; }
:where([data-layout="public"]) .footer-col a {
color: var(--ink); text-decoration: none; font-size: .94rem;
transition: color .18s;
}
:where([data-layout="public"]) .footer-col a:hover { color: var(--primary); }
:where([data-layout="public"]) .footer-cta p {
margin: 0 0 .9rem; font-size: .88rem; line-height: 1.6; color: var(--ink-3);
}
:where([data-layout="public"]) .footer-cta .btn { font-size: .85rem; padding: .6rem 1rem; width: 100%; }
:where([data-layout="public"]) .footer-bottom {
display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
align-items: center; justify-content: space-between;
margin-top: clamp(36px, 5vw, 60px); padding-top: 20px;
border-top: 1px solid var(--line);
font-size: .82rem; color: var(--ink-3);
}
/* Right padding keeps the last legal link clear of the floating buttons. */
:where([data-layout="public"]) .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; padding-right: 56px; }
:where([data-layout="public"]) .footer-bottom a { color: var(--ink-3); text-decoration: none; }
:where([data-layout="public"]) .footer-bottom a:hover { color: var(--primary); }
@media (max-width: 991.98px) {
:where([data-layout="public"]) .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where([data-layout="public"]) .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
:where([data-layout="public"]) .footer-grid { grid-template-columns: 1fr; gap: 30px; }
:where([data-layout="public"]) .footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* Navbar: page-colored background, hairline bottom border without shadow,
muted 14px/500 links that darken on hover, pill action buttons on the right.
Nav links carry no icons. */
:where([data-layout="public"]) .navbar {
background: var(--paper) !important;
border-bottom: 1px solid var(--line) !important;
box-shadow: none !important;
padding-top: .55rem !important; padding-bottom: .55rem !important;
}
:where([data-layout="public"]) .navbar-scrolled { box-shadow: none !important; background: var(--paper) !important; }
@media (min-width: 992px) {
:where([data-layout="public"]) .navbar .nav-link {
font-size: .875rem !important; font-weight: 500 !important;
color: var(--ink-2) !important;
padding: .5rem .7rem !important; border-radius: 7px;
transition: color .15s ease, background .15s ease;
}
:where([data-layout="public"]) .navbar .nav-link:hover { color: var(--ink) !important; background: var(--sunken); }
:where([data-layout="public"]) .navbar .nav-link.active { color: var(--primary) !important; font-weight: 600 !important; }
/* Icons are hidden in nav links, not in action buttons. */
/* Some icons use legacy Font Awesome 4 classes ("fa fa-home"), so target
every inside nav links, not just .fas/.far/.fab. */
:where([data-layout="public"]) .navbar .navbar-nav > .nav-item > .nav-link > i:not(.fa-chevron-down) { display: none !important; }
:where([data-layout="public"]) .navbar .navbar-nav { gap: .15rem; }
:where([data-layout="public"]) .navbar .dropdown-menu {
border: 1px solid var(--line) !important; border-radius: 12px !important;
box-shadow: 0 18px 44px -28px rgba(16, 21, 31, .5) !important;
padding: .4rem !important; margin-top: .4rem !important;
}
:where([data-layout="public"]) .navbar .dropdown-item { border-radius: 8px; font-size: .875rem; padding: .5rem .7rem !important; }
/* Font Awesome icons vary in width; a fixed width keeps labels aligned. */
:where([data-layout="public"]) .navbar .dropdown-item i { min-width: 1.15rem; text-align: center; }
:where([data-layout="public"]) .navbar .dropdown-menu .dropdown-item i { margin-right: .15rem; }
}
/* Right-side actions: pills. */
:where([data-layout="public"]) .navbar .btn-premium, :where([data-layout="public"]) .navbar .btn-light.rounded-pill {
border-radius: 999px !important; box-shadow: none !important;
}
:where([data-layout="public"]) .navbar .btn-premium {
background: var(--primary) !important; border: 1px solid var(--primary) !important;
color: var(--accent-ink) !important; font-weight: 600; font-size: .83rem;
padding: .5rem 1.15rem !important;
}
:where([data-layout="public"]) .navbar .btn-premium:hover { background: color-mix(in srgb, var(--primary) 86%, #000) !important; }
:where([data-layout="public"]) .navbar .btn-light {
background: transparent !important; border: 1px solid var(--line) !important;
color: var(--ink-2) !important; box-shadow: none !important;
}
:where([data-layout="public"]) .navbar .btn-light:hover { background: var(--sunken) !important; color: var(--ink) !important; }
/* Bootstrap sets .btn-primary text via --bs-btn-color, which does not follow
--bs-primary. Force white for contrast (6.9:1 on the brand blue). */
:where([data-layout="public"]) .btn-primary {
--bs-btn-color: var(--accent-ink);
--bs-btn-hover-color: var(--accent-ink);
--bs-btn-active-color: var(--accent-ink);
--bs-btn-disabled-color: var(--accent-ink);
color: var(--accent-ink) !important;
}
:where([data-layout="public"]) .btn-primary:hover, :where([data-layout="public"]) .btn-primary:focus, :where([data-layout="public"]) .btn-primary:active {
color: var(--accent-ink) !important;
}
/* Unified corner radius:
buttons and inputs -> --r-md (12px); cards and panels -> --r-lg (16px);
labels, chips, badges -> --r-pill. Pill buttons are flattened to --r-md;
perfect circles (avatars, icon buttons) are left alone. */
:where([data-layout="public"]) .btn, :where([data-layout="public"]) .btn.rounded-pill, :where([data-layout="public"]) .btn.rounded-3, :where([data-layout="public"]) .btn.rounded-4, :where([data-layout="public"]) .form-control, :where([data-layout="public"]) .form-select, :where([data-layout="public"]) .input-group > .form-control, :where([data-layout="public"]) .dropdown-menu, :where([data-layout="public"]) .page-link {
border-radius: var(--r-md) !important;
}
/* Input-group addons use the same radius as the adjacent input. */
:where([data-layout="public"]) .input-group > .input-group-text { border-radius: var(--r-md) !important; }
/* Flatten inner corners for every control in an input group, including
[icon][input] where the input is the last child. */
:where([data-layout="public"]) .input-group > .form-control:not(:first-child), :where([data-layout="public"]) .input-group > .form-select:not(:first-child), :where([data-layout="public"]) .input-group > .input-group-text:not(:first-child), :where([data-layout="public"]) .input-group > .btn:not(:first-child) {
border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
}
:where([data-layout="public"]) .input-group > .form-control:not(:last-child), :where([data-layout="public"]) .input-group > .form-select:not(:last-child), :where([data-layout="public"]) .input-group > .input-group-text:not(:last-child), :where([data-layout="public"]) .input-group > .btn:not(:last-child) {
border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
}
:where([data-layout="public"]) .card, :where([data-layout="public"]) .product-card, :where([data-layout="public"]) .related-card, :where([data-layout="public"]) .feature-card, :where([data-layout="public"]) .blog-card, :where([data-layout="public"]) .portofolio-card, :where([data-layout="public"]) .page-card, :where([data-layout="public"]) .product-img-box, :where([data-layout="public"]) .card.rounded-4, :where([data-layout="public"]) .card.rounded-3 {
border-radius: var(--r-lg) !important;
}
:where([data-layout="public"]) .badge, :where([data-layout="public"]) .badge.rounded-pill, :where([data-layout="public"]) .product-badge, :where([data-layout="public"]) .badge-type, :where([data-layout="public"]) .cat-chip, :where([data-layout="public"]) .cat-pill, :where([data-layout="public"]) .hero-pill {
border-radius: var(--r-pill) !important;
}
/* Images inside cards use one step below the card radius so the curves
stay parallel to the card edge. */
:where([data-layout="public"]) .product-img, :where([data-layout="public"]) .related-img, :where([data-layout="public"]) .gallery-thumb, :where([data-layout="public"]) .ph-thumb {
border-radius: var(--r-md) !important;
}
:where([data-layout="public"]) .rounded-circle, :where([data-layout="public"]) .btn-icon-circle { border-radius: 50% !important; }
/* Product card (markup: templates/elements/product_card.html).
The card owns the padding so image and text share one left edge.
Images use 4:3 + contain so screenshots are never cropped and card heights stay even. */
:where([data-layout="public"]) .product-card {
--pc-pad: 16px; /* single source of padding */
display: flex; flex-direction: column;
height: 100%; padding: var(--pc-pad);
background: var(--paper);
border: 1px solid var(--line) !important;
border-radius: var(--r-lg) !important;
box-shadow: none !important;
transition: border-color .18s ease, box-shadow .18s ease;
}
:where([data-layout="public"]) .product-card:hover {
transform: none !important;
border-color: color-mix(in srgb, var(--primary) 45%, var(--line)) !important;
box-shadow: 0 10px 28px -22px rgba(16, 21, 31, .5) !important;
}
:where([data-layout="public"]) .product-card .pc-thumb-link { display: block; text-decoration: none; }
:where([data-layout="public"]) .product-card .product-img-wrapper {
position: relative;
aspect-ratio: 4 / 3;
height: auto !important;
background: var(--sunken) !important;
border: 1px solid var(--line);
border-radius: var(--r-md);
overflow: hidden !important;
padding: 0 !important;
display: grid; place-items: center;
}
:where([data-layout="public"]) .product-card .product-img {
width: 100%; height: 100%;
object-fit: contain !important;
padding: 10px; /* keeps the image off the box edge */
transform: none !important;
transition: none !important;
}
:where([data-layout="public"]) .product-card .product-img-kosong {
display: grid; place-items: center;
color: var(--ink-3); font-size: 2.2rem; opacity: .35;
}
:where([data-layout="public"]) .product-card .product-badge {
position: absolute; top: 10px; right: 10px; z-index: 2;
background: color-mix(in srgb, var(--ink) 82%, transparent);
backdrop-filter: blur(4px);
color: #fff; padding: .25rem .7rem;
font-size: .67rem; font-weight: 600; letter-spacing: .04em;
text-transform: uppercase;
}
:where([data-layout="public"]) .product-card .pc-body {
display: flex; flex-direction: column; flex: 1;
padding: 14px 0 0 0; /* no horizontal padding: the card provides it */
}
:where([data-layout="public"]) .product-card .pc-name {
font-family: var(--font-display);
font-size: 1rem; font-weight: 600; line-height: 1.35;
letter-spacing: -.01em; margin: 0 0 .35rem;
}
:where([data-layout="public"]) .product-card .pc-name a { color: var(--ink); text-decoration: none; }
:where([data-layout="public"]) .product-card:hover .pc-name a { color: var(--primary); }
:where([data-layout="public"]) .product-card .pc-desc {
font-size: .85rem; line-height: 1.6; color: var(--ink-2);
margin: 0 0 .9rem;
}
:where([data-layout="public"]) .product-card .pc-meta {
display: flex; align-items: baseline; justify-content: space-between;
gap: .5rem; margin-top: auto; margin-bottom: .85rem;
}
:where([data-layout="public"]) .product-card .price-tag {
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
font-size: 1.05rem; font-weight: 600; color: var(--ink);
letter-spacing: -.02em;
}
:where([data-layout="public"]) .product-card .pc-stock { font-size: .76rem; color: var(--ink-3); }
:where([data-layout="public"]) .product-card .btn-buy {
width: 100%; border: 0;
background: var(--primary); color: var(--accent-ink);
border-radius: var(--r-md);
padding: .6rem 1rem; font-size: .85rem; font-weight: 600;
}
:where([data-layout="public"]) .product-card .btn-buy:hover {
background: color-mix(in srgb, var(--primary) 86%, #000);
color: var(--accent-ink);
}
:where([data-layout="public"]) .product-card .btn-buy:disabled {
background: var(--sunken); color: var(--ink-3); cursor: not-allowed;
}
:where([data-layout="public"]) .product-card .btn-detail {
display: block; text-align: center; text-decoration: none;
margin-top: .5rem; padding: .3rem;
font-size: .78rem; font-weight: 500; color: var(--ink-3);
}
:where([data-layout="public"]) .product-card .btn-detail:hover { color: var(--primary); }
@media (max-width: 575.98px) {
:where([data-layout="public"]) .product-card { --pc-pad: 14px; }
}
/* Login button: visible border and ink text on the white navbar. */
:where([data-layout="public"]) .nav-login {
border: 1px solid var(--line); background: var(--paper);
color: var(--ink); font-size: .86rem; font-weight: 600;
padding: .44rem 1.15rem; border-radius: var(--r-md);
}
:where([data-layout="public"]) .nav-login:hover {
border-color: color-mix(in srgb, var(--primary) 50%, var(--line));
background: var(--sunken); color: var(--primary);
}
/* Navbar brand: two-tone name with an accent dot. */
:where([data-layout="public"]) .navbar-brand {
font-family: var(--font-display) !important;
font-weight: 700 !important;
letter-spacing: -.035em;
font-size: 1.32rem !important;
}
/* Own colors so .navbar-scrolled .navbar-brand (forced grey) does not
recolor the brand name. */
:where([data-layout="public"]) .bm-a { color: var(--primary) !important; }
:where([data-layout="public"]) .bm-b { color: var(--ink) !important; }
:where([data-layout="public"]) .bm-dot { color: var(--primary) !important; }
@media (min-width: 992px) {
/* Links centered, actions on the right. */
:where([data-layout="public"]) .navbar .navbar-nav.nav-tengah { margin-left: auto !important; margin-right: auto !important; }
:where([data-layout="public"]) .navbar .nav-link { font-size: .9rem !important; padding: .5rem .85rem !important; }
:where([data-layout="public"]) .navbar .nav-link.active {
position: relative;
background: transparent !important;
}
:where([data-layout="public"]) .navbar .nav-link.active::after {
content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .12rem;
height: 2px; border-radius: 2px; background: var(--primary);
}
}
/* "Login" is a plain text link; only the call-to-action is a pill,
so a single action stands out. */
:where([data-layout="public"]) .nav-login {
border: 0 !important; background: none !important;
color: var(--ink-2) !important; font-weight: 500 !important;
font-size: .9rem !important; padding: .4rem .7rem !important;
}
:where([data-layout="public"]) .nav-login:hover { color: var(--primary) !important; background: none !important; }
/* Call-to-action: pill with an icon circle at the right end. */
:where([data-layout="public"]) .nav-cta {
display: inline-flex; align-items: center; gap: .65rem;
padding: .3rem .34rem .3rem 1.05rem;
border-radius: var(--r-pill);
border: 1px solid color-mix(in srgb, var(--primary) 22%, #ffffff);
background: color-mix(in srgb, var(--primary) 5%, #ffffff);
color: var(--primary); font-weight: 600; font-size: .86rem;
text-decoration: none; white-space: nowrap;
transition: background .18s ease, border-color .18s ease;
}
:where([data-layout="public"]) .nav-cta:hover {
background: color-mix(in srgb, var(--primary) 11%, #ffffff);
border-color: color-mix(in srgb, var(--primary) 38%, #ffffff);
color: var(--primary);
}
:where([data-layout="public"]) .nav-cta .bulat {
width: 30px; height: 30px; border-radius: 50%;
background: var(--primary); color: var(--accent-ink);
display: grid; place-items: center; font-size: .72rem;
transition: transform .18s ease;
}
:where([data-layout="public"]) .nav-cta:hover .bulat { transform: translateX(2px); }
/* Below 1200px the navbar runs out of room: drop the label, keep the circle
as a round button. */
@media (max-width: 1199.98px) {
:where([data-layout="public"]) .nav-cta { padding: .3rem; border-color: transparent; background: none; }
:where([data-layout="public"]) .nav-cta .teks { display: none; }
}
@media (max-width: 991.98px) { :where([data-layout="public"]) .nav-cta { display: none !important; } }
/* Cart and bell match the CTA icon circle: round, thin border, no shadow. */
:where([data-layout="public"]) .navbar .btn-light.rounded-circle {
background: var(--paper) !important;
border: 1px solid var(--line) !important;
color: var(--ink-2) !important;
}
:where([data-layout="public"]) .navbar .btn-light.rounded-circle:hover {
background: var(--sunken) !important; color: var(--primary) !important;
}
/* Page head (.page-head): shared by blog, store, portfolio and licensing pages. */
:where([data-layout="public"]) .page-head {
position: relative; overflow: hidden;
background: linear-gradient(180deg,
color-mix(in srgb, var(--primary) 8%, #ffffff) 0%,
color-mix(in srgb, var(--primary) 3%, #ffffff) 62%,
var(--paper) 100%) !important;
border-bottom: 1px solid var(--line);
padding: clamp(128px, 12vw, 172px) 0 clamp(44px, 5vw, 64px) !important;
}
:where([data-layout="public"]) .page-head::after {
content: ""; position: absolute; pointer-events: none;
width: 34vw; top: -14%; height: 70%; right: -10vw;
background: color-mix(in srgb, var(--primary) 6%, #ffffff);
transform: skewX(-16deg);
}
:where([data-layout="public"]) .page-head > .container { position: relative; z-index: 1; }
:where([data-layout="public"]) .page-head h1 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 1.592rem + 0.9231vw, 2.7rem);
font-weight: 700; line-height: 1.1; letter-spacing: -.04em;
color: var(--ink); margin: 0;
}
:where([data-layout="public"]) .page-head .lead-sub {
margin: 14px 0 0; color: var(--ink-2);
font-size: clamp(0.95rem, 0.9269rem + 0.1026vw, 1.05rem); max-width: 42rem;
}
:where([data-layout="public"]) .page-head .ph-back {
/* inline-flex would share a line with the adjacent badge; they must stack. */
display: flex; width: fit-content; align-items: center; gap: .4rem;
margin-bottom: 14px; font-size: .84rem; font-weight: 600;
color: var(--ink-3); text-decoration: none;
}
:where([data-layout="public"]) .page-head .ph-back:hover { color: var(--primary); }
:where([data-layout="public"]) .page-head .ph-meta {
display: flex; flex-wrap: wrap; gap: 0;
margin-top: 26px; padding-top: 18px;
border-top: 1px solid color-mix(in srgb, var(--primary) 14%, #ffffff);
}
:where([data-layout="public"]) .page-head .ph-meta div {
padding-right: 24px; margin-right: 24px;
border-right: 1px solid color-mix(in srgb, var(--primary) 14%, #ffffff);
}
:where([data-layout="public"]) .page-head .ph-meta div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
:where([data-layout="public"]) .page-head .ph-meta b {
display: block; font: 700 1.5rem/1 var(--font-display);
font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -.03em;
}
:where([data-layout="public"]) .page-head .ph-meta span { font-size: .78rem; color: var(--ink-3); }
:where([data-layout="public"]) .page-head .ph-thumb {
width: 112px; height: 112px; object-fit: cover; border-radius: var(--r-md);
border: 1px solid var(--line); flex-shrink: 0;
}
@media (max-width: 575.98px) {
:where([data-layout="public"]) .page-head .ph-meta div { padding-right: 16px; margin-right: 16px; }
}
/* Page-type badge above the title. */
:where([data-layout="public"]) .ph-badge {
display: inline-flex; align-items: center; gap: .45rem;
padding: .4rem .85rem; margin-bottom: 1rem;
border-radius: var(--r-pill);
background: var(--accent-soft); color: var(--primary);
font: 600 .82rem/1 var(--font-body); text-decoration: none;
}
:where([data-layout="public"]) a.ph-badge:hover { background: color-mix(in srgb, var(--primary) 14%, #ffffff); color: var(--primary); }
:where([data-layout="public"]) .ph-badge i { font-size: .75rem; }
/* The title may sit next to a square image (category, work). */
:where([data-layout="public"]) .ph-judul { display: flex; align-items: flex-start; gap: clamp(16px, 2.2vw, 26px); }
:where([data-layout="public"]) .ph-judul .ph-teks { min-width: 0; }
@media (max-width: 575.98px) {
:where([data-layout="public"]) .ph-judul { gap: 14px; }
:where([data-layout="public"]) .page-head .ph-thumb { width: 76px; height: 76px; }
}
/* Two columns: text left, image right. */
:where([data-layout="public"]) .ph-grid {
display: grid; align-items: center;
grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr);
gap: clamp(20px, 4vw, 48px);
}
@media (max-width: 991.98px) { :where([data-layout="public"]) .ph-grid { grid-template-columns: 1fr; } }
/* ── Page-head illustration drawn in CSS ──
Follows color tokens, stays sharp at any density and adds no downloads. */
:where([data-layout="public"]) .ph-art {
position: relative; aspect-ratio: 7 / 5; min-width: 0;
}
:where([data-layout="public"]) .ph-art > * { position: absolute; }
:where([data-layout="public"]) .ph-art .pa-blob {
inset: 6% 2% 8% 4%; border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
background: color-mix(in srgb, var(--primary) 7%, #ffffff);
}
:where([data-layout="public"]) .ph-art .pa-orbit { inset: 0; width: 100%; height: 100%; overflow: visible; }
:where([data-layout="public"]) .ph-art .pa-orbit ellipse {
fill: none; stroke: color-mix(in srgb, var(--primary) 30%, #ffffff); stroke-width: 1.3;
}
:where([data-layout="public"]) .ph-art .pa-orbit circle { fill: var(--primary); }
:where([data-layout="public"]) .ph-art .pa-orbit circle.pucat { fill: color-mix(in srgb, var(--primary) 45%, #ffffff); }
:where([data-layout="public"]) .ph-art .pa-dots {
background-image: radial-gradient(color-mix(in srgb, var(--primary) 32%, #ffffff) 1.7px, transparent 1.7px);
background-size: 13px 13px; width: 92px; height: 72px;
}
:where([data-layout="public"]) .ph-art .dR { right: 0; top: 4%; }
:where([data-layout="public"]) .ph-art .dL { left: 2%; bottom: 6%; }
/* Stacked sheets + icon card. */
:where([data-layout="public"]) .ph-art .pa-sheet {
border-radius: 18px;
background: rgba(255, 255, 255, .72);
border: 1px solid color-mix(in srgb, var(--primary) 14%, #ffffff);
box-shadow: 0 20px 44px -34px rgba(16, 21, 31, .6);
backdrop-filter: blur(2px);
}
:where([data-layout="public"]) .ph-art .s3 { width: 40%; height: 54%; right: 11%; top: 16%; transform: rotate(-7deg); }
:where([data-layout="public"]) .ph-art .s2 { width: 42%; height: 56%; right: 15%; top: 21%; transform: rotate(4deg); }
:where([data-layout="public"]) .ph-art .pa-lines { right: 19%; top: 36%; width: 26%; display: grid; gap: 9px; }
:where([data-layout="public"]) .ph-art .pa-lines i {
display: block; height: 7px; border-radius: 4px;
background: color-mix(in srgb, var(--primary) 16%, #ffffff);
}
:where([data-layout="public"]) .ph-art .pa-lines i:nth-child(2) { width: 82%; }
:where([data-layout="public"]) .ph-art .pa-lines i:nth-child(3) { width: 58%; }
:where([data-layout="public"]) .ph-art .pa-card {
left: 14%; top: 24%; width: 34%; aspect-ratio: 1;
border-radius: 22px;
background: rgba(255, 255, 255, .82);
border: 1px solid color-mix(in srgb, var(--primary) 16%, #ffffff);
box-shadow: 0 26px 54px -34px rgba(16, 21, 31, .62);
display: grid; place-items: center;
color: var(--primary); font-size: clamp(1.6rem, 1.369rem + 1.026vw, 2.6rem);
}
@media (max-width: 991.98px) { :where([data-layout="public"]) .ph-art { display: none; } }
/* ── Product detail page head ──
Uses the same light-blue band as the store, blog and portfolio heads. */
:where([data-layout="public"]) .product-hero {
position: relative; overflow: hidden;
padding-top: clamp(118px, 11vw, 158px) !important;
margin-top: 0 !important;
}
/* This wrapper holds the whole top of the product page (gallery, buy panel,
description) and can be ~2500px tall, so the band is a fixed-height
layer at the top rather than the element background. */
:where([data-layout="public"]) .product-hero::before, :where([data-layout="public"]) .product-hero::after {
content: ""; position: absolute; left: 0; right: 0; top: 0;
height: clamp(360px, 42vw, 560px); pointer-events: none; z-index: 0;
}
:where([data-layout="public"]) .product-hero::before {
background: linear-gradient(180deg,
color-mix(in srgb, var(--primary) 8%, #ffffff) 0%,
color-mix(in srgb, var(--primary) 3%, #ffffff) 58%,
rgba(255, 255, 255, 0) 100%);
}
/* No slanted plane here: without a band bottom edge it would stop abruptly
mid-page and look like a rendering glitch. */
:where([data-layout="public"]) .product-hero::after { display: none; }
:where([data-layout="public"]) .product-hero > .container { position: relative; z-index: 1; }
/* ── Footer alignment ──
Uses the page-head gradient reversed so the footer does not read as a
detached grey block. */
:where([data-layout="public"]) .site-footer {
background: linear-gradient(180deg,
var(--paper) 0%,
color-mix(in srgb, var(--primary) 3%, #ffffff) 38%,
color-mix(in srgb, var(--primary) 8%, #ffffff) 100%) !important;
}
:where([data-layout="public"]) .footer-social a { border-radius: 50% !important; width: 36px !important; height: 36px !important; }
:where([data-layout="public"]) .footer-social a:hover { background: var(--paper); }
/* Footer CTA matches the navbar button: pill with an icon circle. */
:where([data-layout="public"]) .ft-cta {
display: inline-flex; align-items: center; justify-content: space-between;
gap: .65rem; width: 100%;
padding: .3rem .34rem .3rem 1.05rem;
border-radius: var(--r-pill);
border: 1px solid color-mix(in srgb, var(--primary) 24%, #ffffff);
background: color-mix(in srgb, var(--primary) 6%, #ffffff);
color: var(--primary); font-weight: 600; font-size: .86rem;
text-decoration: none;
transition: background .18s ease, border-color .18s ease;
}
:where([data-layout="public"]) .ft-cta:hover {
background: color-mix(in srgb, var(--primary) 12%, #ffffff);
border-color: color-mix(in srgb, var(--primary) 40%, #ffffff);
color: var(--primary);
}
:where([data-layout="public"]) .ft-cta .bulat {
flex: none; width: 30px; height: 30px; border-radius: 50%;
background: var(--primary); color: var(--accent-ink);
display: grid; place-items: center; font-size: .72rem;
transition: transform .18s ease;
}
:where([data-layout="public"]) .ft-cta:hover .bulat { transform: translateX(2px); }
/* Narrow-screen spacing: desktop paddings eat too much of a 390px viewport,
and the page-head top offset must match the shorter mobile navbar (~66px). */
@media (max-width: 575.98px) {
:where([data-layout="public"]) .page-head, :where([data-layout="public"]) .page-hero {
padding-top: 92px !important;
padding-bottom: 30px !important;
}
:where([data-layout="public"]) .product-hero { padding-top: 88px !important; }
:where([data-layout="public"]) .page-card {
padding: 20px 18px !important;
margin-left: 0 !important; margin-right: 0 !important;
border-radius: 14px !important;
}
:where([data-layout="public"]) .page-content-section { padding-top: 18px !important; }
/* 1.15rem/1.9 body text is sized for wide columns; reduce it on phones. */
:where([data-layout="public"]) .page-body { font-size: var(--fs-body) !important; line-height: 1.72 !important; }
/* Both are .container: zero padding would put text against the screen edge.
Keep a 16px gutter. */
:where([data-layout="public"]) .oc-wrap, :where([data-layout="public"]) .pf-wrap { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
:where([data-layout="public"]) .page-head, :where([data-layout="public"]) .page-hero { padding-top: 104px !important; }
:where([data-layout="public"]) .product-hero { padding-top: 100px !important; }
:where([data-layout="public"]) .page-card { padding: 28px 26px !important; }
}
/* More phone spacing: these values are sized for wide columns. */
@media (max-width: 575.98px) {
:where([data-layout="public"]) .contact-info-strip { padding: 22px !important; }
:where([data-layout="public"]) .staff-info { padding: 20px !important; }
:where([data-layout="public"]) .feature-card { padding: 22px 20px !important; }
/* Numbered steps: shrink the number gutter along with the circle. */
:where([data-layout="public"]) .oc-langkah > li { padding-left: 34px !important; }
:where([data-layout="public"]) .oc-langkah > li::before { width: 24px !important; height: 24px !important; font-size: .72rem !important; }
:where([data-layout="public"]) .product-img-box { --img-pad: 14px; }
}
/* Pagination: separated, rounded items using the shared radius scale,
with touch targets of at least 44px. */
:where([data-layout="public"]) .pagination {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center; margin-bottom: 0;
}
:where([data-layout="public"]) .pagination .page-item { margin: 0; }
:where([data-layout="public"]) .pagination .page-link {
min-width: 44px; height: 44px; padding: 0 .75rem;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line) !important;
border-radius: var(--r-md) !important;
background: var(--paper);
color: var(--ink-2);
font-size: .9rem; font-weight: 600;
box-shadow: none !important;
transition: border-color .18s ease, color .18s ease, background .18s ease;
}
:where([data-layout="public"]) .pagination .page-link:hover {
background: var(--sunken);
border-color: color-mix(in srgb, var(--primary) 45%, var(--line)) !important;
color: var(--primary);
}
:where([data-layout="public"]) .pagination .page-link:focus-visible {
outline: 2px solid var(--primary); outline-offset: 2px;
}
:where([data-layout="public"]) .pagination .page-item.active .page-link {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: var(--accent-ink) !important;
}
:where([data-layout="public"]) .pagination .page-item.disabled .page-link {
opacity: .45; pointer-events: none;
}
@media (max-width: 575.98px) {
:where([data-layout="public"]) .pagination { gap: 6px; }
:where([data-layout="public"]) .pagination .page-link { min-width: 40px; height: 40px; padding: 0 .55rem; }
}
/* ── Notification prompt ──
Shown only while reading an article, after adding to cart, or after login. */
:where([data-layout="public"]) .tawaran-notif {
position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%);
z-index: 1085; width: min(92vw, 420px);
background: var(--paper); color: var(--ink);
border: 1px solid var(--line); border-radius: var(--r-lg, 18px);
box-shadow: 0 18px 44px -20px rgba(16, 21, 31, .45);
padding: 1rem 1.1rem; transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
:where([data-layout="public"]) .tawaran-notif.tampil { transform: translate(-50%, 0); }
:where([data-layout="public"]) .tawaran-notif .tn-judul { font-weight: 700; font-size: .95rem; margin-bottom: .25rem; }
:where([data-layout="public"]) .tawaran-notif .tn-isi { font-size: .85rem; color: var(--ink-2); line-height: 1.55; }
:where([data-layout="public"]) .tawaran-notif .tn-aksi { display: flex; gap: .5rem; margin-top: .85rem; }
:where([data-layout="public"]) .tawaran-notif .tn-aksi .btn { font-size: .82rem; border-radius: 999px; padding: .4rem 1rem; }
@media (max-width: 575.98px) { :where([data-layout="public"]) .tawaran-notif { bottom: 76px; } }
/* Floating buttons share the bottom edge: back-to-top left, language picker right. */
:where([data-layout="public"]) .pilih-bahasa {
position: fixed; right: 30px; bottom: 18px;
z-index: 1040;
}
:where([data-layout="public"]) .pilih-bahasa > button {
display: inline-flex; align-items: center; gap: .4rem;
height: 40px; padding: 0 .85rem;
border: 1px solid var(--line); border-radius: var(--r-pill, 999px);
background: var(--paper); color: var(--ink-2);
font-size: .8rem; font-weight: 600; letter-spacing: .02em;
box-shadow: 0 10px 26px -14px rgba(16, 21, 31, .5);
transition: border-color .18s, color .18s, transform .18s;
}
:where([data-layout="public"]) .pilih-bahasa > button:hover {
border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
color: var(--primary); transform: translateY(-1px);
}
:where([data-layout="public"]) .pilih-bahasa .pb-menu {
position: absolute; right: 0; bottom: calc(100% + 8px);
min-width: 168px; padding: .35rem;
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-md, 14px);
box-shadow: 0 18px 44px -20px rgba(16, 21, 31, .45);
display: none;
}
:where([data-layout="public"]) .pilih-bahasa.buka .pb-menu { display: block; }
:where([data-layout="public"]) .pilih-bahasa .pb-menu button {
display: flex; align-items: center; gap: .55rem; width: 100%;
padding: .5rem .6rem; border: 0; background: none; border-radius: 8px;
font-size: .85rem; color: var(--ink); text-align: left;
}
:where([data-layout="public"]) .pilih-bahasa .pb-menu button:hover { background: var(--sunken); }
:where([data-layout="public"]) .pilih-bahasa .pb-menu button[aria-current="true"] { color: var(--primary); font-weight: 600; }
:where([data-layout="public"]) .pilih-bahasa .pb-cek { width: 1rem; text-align: center; opacity: .25; }
:where([data-layout="public"]) .pilih-bahasa .pb-menu button[aria-current="true"] .pb-cek { opacity: 1; }
@media (max-width: 991.98px) {
:where([data-layout="public"]) .pilih-bahasa { bottom: 78px; right: 20px; }
}
/* Public badges: one typographic style, several tones. Pill shape (--r-pill).
accent : page type/category markers (ph-badge, pk-tag, badge-type,
cat-badge on light backgrounds, .badge.tone-accent)
neutral: tags (tag-pill, tag-badge)
on dark/image: cat-badge in the article hero, product-badge
status : .badge + Bootstrap color classes / .tone-* (status_badge tag in core_tags) */
:where([data-layout="public"]) .ph-badge, :where([data-layout="public"]) .pk-tag, :where([data-layout="public"]) .badge-type, :where([data-layout="public"]) .cat-badge, :where([data-layout="public"]) .tag-pill, :where([data-layout="public"]) .tag-badge, :where([data-layout="public"]) .product-card .product-badge, :where([data-layout="public"]) .badge {
--l-ink: var(--primary);
--l-bg: var(--accent-soft);
--l-bd: color-mix(in srgb, var(--primary) 20%, #ffffff);
display: inline-flex; align-items: center; gap: .4em;
padding: .38em .85em;
border: 1px solid var(--l-bd) !important;
border-radius: var(--r-pill) !important;
background: var(--l-bg) !important;
color: var(--l-ink) !important;
font: 600 .76rem/1.15 var(--font-body);
letter-spacing: .01em;
text-transform: none;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
transition: background-color .15s, border-color .15s, color .15s;
}
:where([data-layout="public"]) .ph-badge i, :where([data-layout="public"]) .pk-tag i, :where([data-layout="public"]) .badge-type i, :where([data-layout="public"]) .cat-badge i, :where([data-layout="public"]) .badge i { font-size: .9em; }
/* Neutral: article tags. Links turn accent on hover. */
:where([data-layout="public"]) .tag-pill, :where([data-layout="public"]) .tag-badge {
--l-ink: #475569; --l-bg: var(--sunken); --l-bd: var(--line);
margin: .2rem .15rem;
font-weight: 500;
}
:where([data-layout="public"]) a.tag-pill:hover, :where([data-layout="public"]) a.tag-badge:hover, :where([data-layout="public"]) a.ph-badge:hover, :where([data-layout="public"]) a.cat-badge:hover {
--l-ink: var(--primary); --l-bg: color-mix(in srgb, var(--primary) 12%, #ffffff);
--l-bd: color-mix(in srgb, var(--primary) 32%, #ffffff);
}
:where([data-layout="public"]) .tag-badge.bg-primary { --l-ink: #fff; --l-bg: var(--primary); --l-bd: var(--primary); }
/* On dark backgrounds (article hero) and over images (product card): dark/light
glass instead of solid blue competing with the title. */
:where([data-layout="public"]) .post-hero .cat-badge, :where([data-layout="public"]) .cat-badge {
--l-ink: #ffffff; --l-bg: rgba(255, 255, 255, .12); --l-bd: rgba(255, 255, 255, .28);
backdrop-filter: blur(4px);
}
:where([data-layout="public"]) a.cat-badge:hover { --l-ink: #fff; --l-bg: rgba(255, 255, 255, .22); --l-bd: rgba(255, 255, 255, .4); }
:where([data-layout="public"]) .product-card .product-badge {
--l-ink: #ffffff; --l-bg: color-mix(in srgb, var(--ink) 78%, transparent); --l-bd: rgba(255, 255, 255, .18);
padding: .32em .7em; font-size: .68rem;
backdrop-filter: blur(4px);
}
/* Status (orders, invoices, availability). Same tones as the console. */
:where([data-layout="public"]) .badge.bg-success, :where([data-layout="public"]) .badge.bg-success-subtle, :where([data-layout="public"]) .badge.text-success, :where([data-layout="public"]) .badge.tone-good {
--l-ink: var(--good); --l-bg: color-mix(in srgb, var(--good) 9%, #fff); --l-bd: color-mix(in srgb, var(--good) 26%, #fff); }
:where([data-layout="public"]) .badge.bg-warning, :where([data-layout="public"]) .badge.bg-warning-subtle, :where([data-layout="public"]) .badge.text-warning, :where([data-layout="public"]) .badge.tone-warn {
--l-ink: var(--warn); --l-bg: color-mix(in srgb, var(--warn) 10%, #fff); --l-bd: color-mix(in srgb, var(--warn) 28%, #fff); }
:where([data-layout="public"]) .badge.bg-danger, :where([data-layout="public"]) .badge.bg-danger-subtle, :where([data-layout="public"]) .badge.text-danger, :where([data-layout="public"]) .badge.tone-crit {
--l-ink: var(--crit); --l-bg: color-mix(in srgb, var(--crit) 8%, #fff); --l-bd: color-mix(in srgb, var(--crit) 26%, #fff); }
:where([data-layout="public"]) .badge.bg-info, :where([data-layout="public"]) .badge.bg-info-subtle, :where([data-layout="public"]) .badge.tone-info {
--l-ink: #0e6e8c; --l-bg: #e2f3f8; --l-bd: color-mix(in srgb, #0e6e8c 24%, #fff); }
:where([data-layout="public"]) .badge.bg-secondary, :where([data-layout="public"]) .badge.bg-light, :where([data-layout="public"]) .badge.tone-neutral {
--l-ink: #475569; --l-bg: var(--sunken); --l-bd: var(--line); }
:where([data-layout="public"]) .badge.text-white, :where([data-layout="public"]) .badge.bg-white { --l-ink: #fff; --l-bg: rgba(255, 255, 255, .16); --l-bd: rgba(255, 255, 255, .28); }
:where([data-layout="public"]) .badge-dot::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; flex: none; }
:where([data-layout="public"]) .badge.is-code { font-family: var(--font-mono); font-weight: 500; }
/* Counters on icons (cart, bell) stay solid pills. */
:where([data-layout="public"]) .position-absolute.badge, :where([data-layout="public"]) .badge.rounded-circle {
--l-ink: #fff; --l-bg: var(--crit); --l-bd: #fff;
padding: .28em .45em; min-width: 1.5em; justify-content: center; font-size: .68rem;
}
/* Page-head spacing: one value for every public page except home (.hero).
"html body" + !important beats per-template styles loaded later.
Note: the clamp minimum (75px) exceeds its maximum (50px), so it resolves to 75px. */
html body:where([data-layout="public"]) .page-head, html body:where([data-layout="public"]) .page-hero, html body:where([data-layout="public"]) .kontak-kepala {
padding: clamp(75px, 5vw, 50px) 0 clamp(25px, 2vw, 30px) !important;
}
/* Counter badge (cart): small red dot at the button corner, with a ring in the
navbar color separating it from the round button border. Console equivalent: backend.css. */
:where([data-layout="public"]) .badge-hitung {
position: absolute; top: -5px; right: -6px; z-index: 2;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--crit); color: #fff;
font: 700 10.5px/1 var(--font-body); font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 2px var(--paper); pointer-events: none;
}
:where([data-layout="public"]) .badge-hitung.d-none { display: none !important; }
/* Green accent: reusable components, counterpart of .text-success
.text-hijau .link-hijau .bg-hijau .bg-hijau-soft
.border-hijau .btn-hijau .btn-outline-hijau .badge-hijau
.label-hijau (small caps label above a heading)
Blue stays the primary action color; green is for markers, labels and secondary actions. */
:where([data-layout="public"]) .text-hijau { color: var(--hijau) !important; }
:where([data-layout="public"]) .link-hijau { color: var(--hijau) !important; text-decoration-color: color-mix(in srgb, var(--hijau) 40%, transparent); }
:where([data-layout="public"]) .link-hijau:hover { color: var(--hijau-gelap) !important; }
:where([data-layout="public"]) .bg-hijau { background-color: var(--hijau) !important; color: #fff; }
:where([data-layout="public"]) .bg-hijau-soft { background-color: var(--hijau-soft) !important; }
:where([data-layout="public"]) .border-hijau { border-color: var(--hijau-garis) !important; }
:where([data-layout="public"]) .btn-hijau, :where([data-layout="public"]) .btn-success {
--bs-btn-color: #fff; --bs-btn-bg: var(--hijau); --bs-btn-border-color: var(--hijau);
--bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--hijau-gelap); --bs-btn-hover-border-color: var(--hijau-gelap);
--bs-btn-active-color: #fff; --bs-btn-active-bg: var(--hijau-gelap); --bs-btn-active-border-color: var(--hijau-gelap);
--bs-btn-focus-shadow-rgb: var(--hijau-rgb);
--bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--hijau); --bs-btn-disabled-border-color: var(--hijau);
}
:where([data-layout="public"]) .btn-outline-hijau, :where([data-layout="public"]) .btn-outline-success {
--bs-btn-color: var(--hijau); --bs-btn-border-color: var(--hijau-garis);
--bs-btn-hover-color: var(--hijau-gelap); --bs-btn-hover-bg: var(--hijau-soft); --bs-btn-hover-border-color: var(--hijau);
--bs-btn-active-color: #fff; --bs-btn-active-bg: var(--hijau); --bs-btn-active-border-color: var(--hijau);
--bs-btn-focus-shadow-rgb: var(--hijau-rgb);
}
:where([data-layout="public"]) .badge-hijau {
background: var(--hijau-soft) !important; color: var(--hijau-gelap) !important;
border: 1px solid var(--hijau-garis);
}
:where([data-layout="public"]) .label-hijau {
display: inline-block; color: var(--hijau);
font: 700 .74rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}
/* Multi-level navbar menu (navbar_public.html, navMenu controller).
Items with grandchildren open a navbar-wide panel: intro left, children as
column headings, grandchildren as links with icon + description.
Items with children only use a compact dropdown. Both become accordions in the drawer. */
:where([data-layout="public"]) .nav-buka {
background: none; border: 0; display: inline-flex; align-items: center;
gap: .35rem; font: inherit; cursor: pointer;
}
:where([data-layout="public"]) .nav-panah { font-size: .58rem; opacity: .6; transition: transform .2s ease; }
:where([data-layout="public"]) .nav-turun.buka .nav-panah { transform: rotate(180deg); }
/* Green, underlined group headings. */
:where([data-layout="public"]) .nav-grup-judul {
display: block; font-size: .8rem; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--hijau); text-decoration: none;
margin: 0 0 .7rem; padding: 0 .65rem .65rem;
border-bottom: 1px solid var(--line);
}
:where([data-layout="public"]) a.nav-grup-judul:hover { color: var(--hijau-gelap); }
:where([data-layout="public"]) .nav-grup li + li { margin-top: .3rem; }
:where([data-layout="public"]) .nav-tautan {
display: flex; gap: .75rem; align-items: flex-start;
padding: .55rem .65rem; border-radius: 10px;
color: var(--ink); text-decoration: none;
transition: background .15s ease;
}
:where([data-layout="public"]) .nav-tautan:hover, :where([data-layout="public"]) .nav-tautan:focus-visible { background: var(--sunken); color: var(--ink); }
:where([data-layout="public"]) .nav-tautan-ikon {
flex: 0 0 34px; height: 34px; border-radius: 9px;
display: grid; place-items: center;
background: var(--accent-soft); color: var(--primary); font-size: .85rem;
transition: background .15s ease, color .15s ease;
}
:where([data-layout="public"]) .nav-tautan:hover .nav-tautan-ikon { background: var(--primary); color: var(--accent-ink); }
:where([data-layout="public"]) .nav-tautan-teks { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
:where([data-layout="public"]) .nav-tautan-judul { font-size: .9rem; font-weight: 600; line-height: 1.3; }
:where([data-layout="public"]) .nav-tautan.active .nav-tautan-judul { color: var(--primary); }
:where([data-layout="public"]) .nav-tautan-desk { font-size: .78rem; color: var(--ink-3); line-height: 1.4; margin-top: .15rem; }
:where([data-layout="public"]) .nav-semua {
display: inline-flex; align-items: center; gap: .45rem;
color: var(--primary); font-weight: 600; font-size: .86rem; text-decoration: none;
}
:where([data-layout="public"]) .nav-semua i { font-size: .72rem; transition: transform .18s ease; }
:where([data-layout="public"]) .nav-semua:hover { color: var(--primary); }
:where([data-layout="public"]) .nav-semua:hover i { transform: translateX(3px); }
@media (min-width: 992px) {
:where([data-layout="public"]) .nav-turun { position: relative; }
:where([data-layout="public"]) .nav-lebar { position: static; }
:where([data-layout="public"]) .nav-panel {
position: absolute; top: 100%; left: 0; z-index: 1040;
min-width: 320px; margin-top: .55rem; padding: .45rem;
background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 28px 56px -30px rgba(16, 21, 31, .45);
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Invisible bridge above the panel so moving the cursor from the link
into the panel does not cross a gap that closes it. */
:where([data-layout="public"]) .nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -.9rem; height: .9rem; }
:where([data-layout="public"]) .nav-turun.buka > .nav-panel { opacity: 1; visibility: visible; transform: none; }
:where([data-layout="public"]) .nav-lebar > .nav-panel {
left: 0; right: 0; margin-top: 0; border-radius: 0;
border-width: 1px 0; padding: 1.75rem 0 2rem;
box-shadow: 0 30px 50px -34px rgba(16, 21, 31, .4);
}
:where([data-layout="public"]) .nav-panel-isi { display: grid; grid-template-columns: minmax(200px, 250px) 1fr; gap: 2.5rem; }
:where([data-layout="public"]) .nav-pengantar { border-right: 1px solid var(--line); padding: .2rem 2rem .2rem 0; }
:where([data-layout="public"]) .nav-pengantar-judul {
font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
letter-spacing: -.02em; color: var(--ink); line-height: 1.2;
}
:where([data-layout="public"]) .nav-pengantar p { color: var(--ink-3); font-size: .88rem; line-height: 1.55; margin: .55rem 0 1rem; }
:where([data-layout="public"]) .nav-kolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.75rem 2rem; align-content: start; }
:where([data-layout="public"]) .nav-tautan { padding-top: .65rem; padding-bottom: .65rem; }
:where([data-layout="public"]) .nav-ringkas { min-width: 320px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
:where([data-layout="public"]) .nav-panel-isi { grid-template-columns: 1fr; gap: 1.25rem; }
:where([data-layout="public"]) .nav-pengantar { border-right: 0; padding: 0; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
:where([data-layout="public"]) .nav-pengantar p { display: none; }
:where([data-layout="public"]) .nav-pengantar-judul { font-size: 1.1rem; }
}
@media (max-width: 991.98px) {
:where([data-layout="public"]) .navbar-collapse .nav-buka { width: 100%; text-align: left; }
:where([data-layout="public"]) .navbar-collapse .nav-buka .nav-panah { margin-left: auto; width: auto; color: var(--ink-3); }
:where([data-layout="public"]) .navbar-collapse .nav-buka.active { background: transparent; }
:where([data-layout="public"]) .navbar-collapse .nav-turun.buka > .nav-buka { background: var(--sunken); }
:where([data-layout="public"]) .nav-panel { display: none; padding: .25rem 0 .55rem .55rem; }
:where([data-layout="public"]) .nav-turun.buka > .nav-panel { display: block; }
:where([data-layout="public"]) .nav-panel-isi { display: flex; flex-direction: column; padding: 0 !important; max-width: none; }
:where([data-layout="public"]) .nav-pengantar { order: 2; }
:where([data-layout="public"]) .nav-pengantar-judul, :where([data-layout="public"]) .nav-pengantar p { display: none; }
:where([data-layout="public"]) .nav-semua { display: flex; padding: .55rem .7rem; font-size: .88rem; }
:where([data-layout="public"]) .nav-grup + .nav-grup { margin-top: .8rem; }
:where([data-layout="public"]) .nav-tautan { padding: .48rem .7rem; gap: .65rem; align-items: center; }
:where([data-layout="public"]) .nav-grup-judul { padding: 0 0 .45rem; margin: .45rem .7rem .35rem; }
:where([data-layout="public"]) .nav-grup li + li { margin-top: .1rem; }
:where([data-layout="public"]) .nav-tautan-ikon { flex-basis: 28px; height: 28px; border-radius: 8px; font-size: .76rem; }
:where([data-layout="public"]) .nav-tautan-judul { font-size: .9rem; font-weight: 500; color: var(--ink-2); }
:where([data-layout="public"]) .nav-tautan-desk { display: none; }
:where([data-layout="public"]) button.bottom-nav-item { background: none; border: 0; padding: 0; font-family: inherit; }
}
/* ==== Page: apps/blog/templates/blog/public_page_detail.html ==== */
/* ── Page Hero ── */
:where([data-page~="blog-page-detail"]) .page-hero {
position: relative;
padding: 175px 0 70px;
background: #0f172a;
color: #fff;
overflow: hidden;
text-align: center;
}
:where([data-page~="blog-page-detail"]) .page-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.2;
filter: grayscale(100%);
}
:where([data-page~="blog-page-detail"]) .page-hero-glow {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 400px;
background: radial-gradient(circle, rgba(79,70,229,0.3) 0%, transparent 70%);
z-index: 1;
}
:where([data-page~="blog-page-detail"]) .page-hero .container { position: relative; z-index: 2; }
/* ── Breadcrumb ── */
:where([data-page~="blog-page-detail"]) .breadcrumb { display: flex; align-items: center; justify-content: center; }
:where([data-page~="blog-page-detail"]) .breadcrumb-item { display: flex; align-items: center; }
:where([data-page~="blog-page-detail"]) .breadcrumb-item a { color: rgba(255,255,255,0.45); font-size: 0.78rem; text-decoration: none; transition: color 0.2s; line-height: 1; }
:where([data-page~="blog-page-detail"]) .breadcrumb-item a:hover { color: rgba(255,255,255,0.9); }
:where([data-page~="blog-page-detail"]) .breadcrumb-item.active { color: rgba(255,255,255,0.7); font-size: 0.78rem; line-height: 1; }
:where([data-page~="blog-page-detail"]) .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.2); padding-top: 2px; }
/* ── Content Layout ── */
:where([data-page~="blog-page-detail"]) .page-content-section { background: #fff; position: relative; }
:where([data-page~="blog-page-detail"]) .page-card {
max-width: 1250px;
margin: -60px auto 0;
background: #fff;
border-radius: 2rem;
padding: 2rem 3rem;
box-shadow: 0 50px 100px -20px rgba(15,23,42,0.12), 0 30px 60px -30px rgba(0,0,0,0.15);
position: relative;
z-index: 10;
}
@media (max-width: 991px) {
:where([data-page~="blog-page-detail"]) .page-card { margin-top: -40px; padding: 3rem 2.5rem; border-radius: 1.5rem; margin-left: 1rem; margin-right: 1rem; }
}
/* ── Typography ── */
:where([data-page~="blog-page-detail"]) .page-body {
font-size: 1.15rem;
line-height: 1.9;
color: #334155;
}
:where([data-page~="blog-page-detail"]) .page-body h2 {
font-size: 2rem;
font-weight: 800;
color: #0f172a;
margin-top: 3.5rem;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
:where([data-page~="blog-page-detail"]) .page-body h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-top: 2.5rem;
margin-bottom: 1.2rem;
}
:where([data-page~="blog-page-detail"]) .page-body p { margin-bottom: 1.75rem; }
:where([data-page~="blog-page-detail"]) .page-body img {
max-width: 100%;
border-radius: 1.5rem;
margin: 3rem 0;
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1);
}
:where([data-page~="blog-page-detail"]) .page-body blockquote {
border-left: 5px solid var(--primary);
background: #f8fafc;
padding: 2rem 2.5rem;
margin: 3rem 0;
border-radius: 0 1.5rem 1.5rem 0;
font-style: italic;
font-size: 1.25rem;
color: #475569;
}
/* ── Professional Accents ── */
:where([data-page~="blog-page-detail"]) .page-divider {
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
margin: 2.5rem auto;
border-radius: 2px;
}
/* ── ToC Sidebar ── */
:where([data-page~="blog-page-detail"]) .toc-sidebar {
padding: 1.5rem;
background: rgba(var(--primary-rgb), 0.03);
border-radius: 1.5rem;
border: 1px solid rgba(var(--primary-rgb), 0.08);
}
:where([data-page~="blog-page-detail"]) .toc-title {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
margin-bottom: 1.25rem;
display: block;
border-bottom: 1px solid rgba(0,0,0,0.05);
padding-bottom: 0.5rem;
}
:where([data-page~="blog-page-detail"]) .toc-list { list-style: none; padding: 0; margin: 0; }
:where([data-page~="blog-page-detail"]) .toc-item { margin-bottom: 0.25rem; }
:where([data-page~="blog-page-detail"]) .toc-link {
font-size: 0.88rem;
color: #64748b;
text-decoration: none;
transition: all 0.2s;
display: block;
padding: 0.4rem 0;
line-height: 1.4;
}
:where([data-page~="blog-page-detail"]) .toc-link:hover { color: var(--primary); transform: translateX(3px); }
:where([data-page~="blog-page-detail"]) .toc-link.active {
color: var(--primary);
font-weight: 700;
padding-left: 0.75rem;
border-left: 2px solid var(--primary);
}
:where([data-page~="blog-page-detail"]) .fw-800 { font-weight: 800; }
:where([data-page~="blog-page-detail"]) .pb-6 { padding-bottom: 5rem; }
:where([data-page~="blog-page-detail"]) .transition-all { transition: all 0.3s ease; }
:where([data-page~="blog-page-detail"]) .hover-shadow:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: var(--primary) !important; }
/* Public token alignment: light, left-aligned page head separated by a border;
decorative gradients, dot grids and glows are hidden. */
:where([data-page~="blog-page-detail"]) .page-hero {
background: var(--sunken) !important;
border-bottom: 1px solid var(--line) !important;
padding: 116px 0 44px !important;
}
/* This page uses .page-hero-glow and .page-hero-bg, so hide them explicitly. */
:where([data-page~="blog-page-detail"]) .page-hero::before, :where([data-page~="blog-page-detail"]) .page-hero .glow, :where([data-page~="blog-page-detail"]) .page-hero .hero-thumb-bg, :where([data-page~="blog-page-detail"]) .page-hero-glow, :where([data-page~="blog-page-detail"]) .page-hero-bg, :where([data-page~="blog-page-detail"]) .page-divider { display: none !important; }
/* Left-aligned like the blog, store and portfolio page heads. */
:where([data-page~="blog-page-detail"]) .page-hero {
text-align: left !important;
/* The background is light now, so reset inherited text color to normal ink. */
color: var(--ink) !important;
}
:where([data-page~="blog-page-detail"]) .page-hero .row.justify-content-center { justify-content: flex-start !important; }
:where([data-page~="blog-page-detail"]) .page-hero .col-lg-10 { max-width: 100% !important; flex: 0 0 100% !important; }
:where([data-page~="blog-page-detail"]) .page-hero h1 {
font-family: var(--font-display) !important;
color: var(--ink) !important;
font-weight: 600 !important;
font-size: clamp(1.75rem, 3.4vw, 2.6rem) !important;
line-height: 1.12 !important;
letter-spacing: -.035em !important;
max-width: 24ch;
}
/* Breadcrumb colors for the light hero (white text would be unreadable). */
:where([data-page~="blog-page-detail"]) .page-hero .breadcrumb {
justify-content: flex-start !important;
margin-bottom: 14px !important;
}
/* --ink-3 reaches only 3.70:1 here; small text needs 4.5:1. --ink-2 gives 7.67:1. */
:where([data-page~="blog-page-detail"]) .page-hero .breadcrumb-item a { color: var(--ink-2) !important; font-size: .82rem !important; }
:where([data-page~="blog-page-detail"]) .page-hero .breadcrumb-item a:hover { color: var(--primary) !important; }
:where([data-page~="blog-page-detail"]) .page-hero .breadcrumb-item.active { color: var(--ink-2) !important; font-size: .82rem !important; }
:where([data-page~="blog-page-detail"]) .page-hero .breadcrumb-item { color: var(--ink-2) !important; }
:where([data-page~="blog-page-detail"]) .page-hero .breadcrumb-item + .breadcrumb-item::before { color: var(--ink-3) !important; opacity: .55; }
:where([data-page~="blog-page-detail"]) .page-hero nav[aria-label="breadcrumb"] { justify-content: flex-start !important; }
:where([data-page~="blog-page-detail"]) .page-hero p { color: var(--ink-2) !important; }
:where([data-page~="blog-page-detail"]) .page-hero .btn-outline-secondary {
color: var(--ink-2) !important; border-color: var(--line) !important;
}
:where([data-page~="blog-page-detail"]) .page-hero .btn-outline-secondary:hover { background: var(--paper) !important; color: var(--ink) !important; }
:where([data-page~="blog-page-detail"]) .page-hero .cat-pill, :where([data-page~="blog-page-detail"]) .page-hero .badge {
background: var(--accent-soft) !important; color: var(--primary) !important;
border: 0 !important;
}
:where([data-page~="blog-page-detail"]) .page-hero .hero-thumb-img {
border: 1px solid var(--line) !important; box-shadow: none !important;
}
/* The content card stays in normal flow; a negative offset would cover
the second line of the title. */
:where([data-page~="blog-page-detail"]) .page-card {
margin-top: 0 !important;
border: 1px solid var(--line) !important;
box-shadow: none !important;
border-radius: 16px !important;
}
:where([data-page~="blog-page-detail"]) .page-content-section { padding-top: clamp(26px, 3.5vw, 40px) !important; background: var(--sunken) !important; }
/* ==== Page: apps/blog/templates/blog/public_post_detail.html ==== */
/* ── Reading Progress ── */
:where([data-page~="blog-post-detail"]) #reading-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: var(--primary);
width: 0%;
z-index: 9999;
transition: width 0.1s linear;
}
/* ── Hero ── */
:where([data-page~="blog-post-detail"]) .post-hero {
position: relative;
min-height: 580px;
display: flex;
align-items: flex-end;
background: #0f172a;
overflow: hidden;
}
:where([data-page~="blog-post-detail"]) .post-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: brightness(0.35) saturate(0.8);
transform: scale(1.03);
transition: transform 6s ease;
}
:where([data-page~="blog-post-detail"]) .post-hero-bg.loaded { transform: scale(1); }
:where([data-page~="blog-post-detail"]) .post-hero-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(15,23,42,0.98) 0%, rgba(15,23,42,0.5) 50%, rgba(15,23,42,0.15) 100%);
}
:where([data-page~="blog-post-detail"]) .post-hero-content {
position: relative;
z-index: 2;
padding: 150px 0 30px;
width: 100%;
}
/* No-thumbnail variant */
:where([data-page~="blog-post-detail"]) .post-hero-plain {
min-height: auto;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
:where([data-page~="blog-post-detail"]) .post-hero-plain .post-hero-content { padding: 150px 0 70px; }
/* ── Meta pills ── */
:where([data-page~="blog-post-detail"]) .meta-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: rgba(255,255,255,0.55);
font-size: 0.82rem;
font-weight: 500;
}
:where([data-page~="blog-post-detail"]) .meta-pill i { color: var(--primary); }
/* ── Breadcrumb ── */
:where([data-page~="blog-post-detail"]) .breadcrumb { display: flex; align-items: center; }
:where([data-page~="blog-post-detail"]) .breadcrumb-item { display: flex; align-items: center; }
:where([data-page~="blog-post-detail"]) .breadcrumb-item a { color: rgba(255,255,255,0.45); font-size: 0.78rem; text-decoration: none; transition: color 0.2s; line-height: 1; }
:where([data-page~="blog-post-detail"]) .breadcrumb-item a:hover { color: rgba(255,255,255,0.9); }
:where([data-page~="blog-post-detail"]) .breadcrumb-item.active { color: rgba(255,255,255,0.7); font-size: 0.78rem; line-height: 1; }
:where([data-page~="blog-post-detail"]) .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.2); padding-top: 2px; }
/* ── Share Strip ── */
:where([data-page~="blog-post-detail"]) .share-strip {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
:where([data-page~="blog-post-detail"]) .share-btn {
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.6);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
text-decoration: none;
font-size: 0.85rem;
transition: all 0.25s;
cursor: pointer;
}
:where([data-page~="blog-post-detail"]) .share-btn:hover {
background: var(--primary);
border-color: var(--primary);
color: #fff;
transform: translateY(-3px);
}
/* ── Content Layout ── */
:where([data-page~="blog-post-detail"]) .content-section { background: #f8fafc; }
/* Article Card */
:where([data-page~="blog-post-detail"]) .article-card {
background: #fff;
border-radius: 2rem;
padding: 3rem 3.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 20px 60px rgba(0,0,0,0.04);
}
@media (max-width: 767px) {
:where([data-page~="blog-post-detail"]) .article-card { padding: 2rem 1.5rem; border-radius: 1.25rem; }
}
/* Post Body Typography */
:where([data-page~="blog-post-detail"]) .post-body {
font-size: 1.13rem;
line-height: 1.95;
color: #334155;
}
:where([data-page~="blog-post-detail"]) .post-body > p:first-child {
font-size: 1.22rem;
color: #475569;
line-height: 1.85;
}
:where([data-page~="blog-post-detail"]) .post-body h2 {
font-size: 1.7rem;
font-weight: 800;
color: #0f172a;
margin-top: 3rem;
margin-bottom: 1.2rem;
letter-spacing: -0.03em;
scroll-margin-top: 100px;
}
:where([data-page~="blog-post-detail"]) .post-body h3 {
font-size: 1.3rem;
font-weight: 700;
color: #1e293b;
margin-top: 2.5rem;
margin-bottom: 1rem;
scroll-margin-top: 100px;
}
:where([data-page~="blog-post-detail"]) .post-body img {
max-width: 100%;
border-radius: 1.25rem;
margin: 2.5rem 0;
box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
:where([data-page~="blog-post-detail"]) .post-body a {
color: var(--primary);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
:where([data-page~="blog-post-detail"]) .post-body blockquote {
border-left: 4px solid var(--primary);
background: #f1f5f9;
margin: 2rem 0;
padding: 1.5rem 2rem;
border-radius: 0 1rem 1rem 0;
font-style: italic;
color: #475569;
}
:where([data-page~="blog-post-detail"]) .post-body pre, :where([data-page~="blog-post-detail"]) .post-body code {
background: #0f172a;
color: #e2e8f0;
border-radius: 0.75rem;
font-size: 0.9rem;
}
:where([data-page~="blog-post-detail"]) .post-body pre { padding: 1.5rem; overflow-x: auto; }
/* Tags */
/* ── Inline Share (bottom) ── */
:where([data-page~="blog-post-detail"]) .inline-share-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1.4rem;
border-radius: 2rem;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
transition: all 0.25s;
border: 1.5px solid #e2e8f0;
color: #475569;
background: #fff;
cursor: pointer;
}
:where([data-page~="blog-post-detail"]) .inline-share-btn:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
/* ── File Attachments ── */
:where([data-page~="blog-post-detail"]) .file-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 1.25rem;
text-decoration: none;
transition: all 0.25s;
}
:where([data-page~="blog-post-detail"]) .file-card:hover {
border-color: var(--primary);
box-shadow: 0 10px 30px rgba(79,70,229,0.1);
transform: translateY(-3px);
}
:where([data-page~="blog-post-detail"]) .file-icon {
width: 48px; height: 48px;
background: rgba(79,70,229,0.08);
color: var(--primary);
border-radius: 1rem;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
/* ── Sidebar ── */
:where([data-page~="blog-post-detail"]) .sidebar-widget {
background: #fff;
border-radius: 1.5rem;
padding: 2rem;
border: 1px solid #f1f5f9;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
margin-bottom: 1.75rem;
}
:where([data-page~="blog-post-detail"]) .widget-title {
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #94a3b8;
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #f1f5f9;
}
/* Recent post item */
:where([data-page~="blog-post-detail"]) .recent-item {
display: flex;
gap: 0.85rem;
align-items: flex-start;
text-decoration: none;
padding: 0.85rem 0;
border-bottom: 1px solid #f8fafc;
transition: all 0.2s;
}
:where([data-page~="blog-post-detail"]) .recent-item:last-child { border-bottom: none; padding-bottom: 0; }
:where([data-page~="blog-post-detail"]) .recent-item:hover .recent-thumb { border-color: var(--primary); }
:where([data-page~="blog-post-detail"]) .recent-item:hover .recent-title { color: var(--primary); }
:where([data-page~="blog-post-detail"]) .recent-thumb {
width: 60px; height: 60px;
border-radius: 0.875rem;
object-fit: cover;
flex-shrink: 0;
border: 2px solid transparent;
transition: border-color 0.2s;
}
:where([data-page~="blog-post-detail"]) .recent-thumb-placeholder {
width: 60px; height: 60px;
border-radius: 0.875rem;
background: #f1f5f9;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: #cbd5e1;
}
:where([data-page~="blog-post-detail"]) .recent-title {
font-size: 0.85rem;
font-weight: 600;
color: #1e293b;
line-height: 1.4;
transition: color 0.2s;
}
:where([data-page~="blog-post-detail"]) .recent-date {
font-size: 0.72rem;
color: #94a3b8;
margin-top: 0.2rem;
}
/* Copy success state */
:where([data-page~="blog-post-detail"]) .share-btn.copied { background: #10b981; border-color: #10b981; color: #fff; }
:where([data-page~="blog-post-detail"]) .share-btn-admin { border-color: rgba(245,158,11,.7); color: #fbbf24; }
:where([data-page~="blog-post-detail"]) .share-btn-admin:hover { background: #f59e0b; border-color: #f59e0b; color: #fff; }
/* ── Sticky sidebar on desktop ── */
@media (min-width: 992px) {
:where([data-page~="blog-post-detail"]) .sticky-sidebar { position: sticky; top: 70px; }
}
/* ==== Page: apps/blog/templates/blog/public_post_list.html ==== */
/* ── Hero ── */
:where([data-page~="blog-post-list"]) .page-hero {
background: linear-gradient(135deg, #060b1a 0%, #1e1b4b 100%);
padding: 100px 0 80px;
position: relative; overflow: hidden;
}
:where([data-page~="blog-post-list"]) .page-hero::before {
content: "";
position: absolute; inset: 0;
background-image: linear-gradient(rgba(79,70,229,.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(79,70,229,.07) 1px, transparent 1px);
background-size: 48px 48px;
}
:where([data-page~="blog-post-list"]) .page-hero .glow {
position: absolute;
background: radial-gradient(circle, rgba(79,70,229,.3) 0%, transparent 65%);
width: 500px; height: 500px;
top: -120px; right: -120px; z-index: 0;
}
:where([data-page~="blog-post-list"]) .page-hero .container { position: relative; z-index: 1; }
:where([data-page~="blog-post-list"]) .page-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; color: #fff; letter-spacing: -.02em; }
:where([data-page~="blog-post-list"]) .page-hero p { color: #94a3b8; font-size: 1.05rem; max-width: 520px; }
/* Category thumbnail hero */
:where([data-page~="blog-post-list"]) .page-hero.has-thumb { padding: 120px 0 90px; }
:where([data-page~="blog-post-list"]) .page-hero .hero-thumb-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: brightness(0.25) saturate(0.7);
}
:where([data-page~="blog-post-list"]) .page-hero .hero-thumb-img {
width: 200px; height: 200px;
object-fit: cover; border-radius: 1.5rem;
border: 4px solid rgba(255,255,255,.15);
box-shadow: 0 20px 60px rgba(0,0,0,.5);
flex-shrink: 0;
}
:where([data-page~="blog-post-list"]) .search-bar-card { border: none; border-radius: 1.25rem; background: #fff; padding: 1.25rem 1.5rem; box-shadow: 0 4px 24px rgba(0,0,0,0.10); }
:where([data-page~="blog-post-list"]) .post-card { border: none; border-radius: 1.5rem; background: #fff; overflow: hidden; transition: all 0.4s cubic-bezier(0.16,1,0.3,1); height: 100%; }
:where([data-page~="blog-post-list"]) .post-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.08); }
:where([data-page~="blog-post-list"]) .post-img-wrapper { height: 200px; overflow: hidden; position: relative; background: #f1f5f9; }
:where([data-page~="blog-post-list"]) .post-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
:where([data-page~="blog-post-list"]) .post-card:hover .post-img { transform: scale(1.06); }
:where([data-page~="blog-post-list"]) .post-category { position: absolute; top: 1rem; left: 1rem; background: rgba(255,255,255,0.92); padding: 0.3rem 0.85rem; border-radius: 2rem; font-size: 0.7rem; font-weight: 600; color: var(--primary); backdrop-filter: blur(4px); }
:where([data-page~="blog-post-list"]) .sidebar-card { border: none; border-radius: 1.25rem; background: #fff; padding: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
:where([data-page~="blog-post-list"]) .btn-read { color: var(--primary); font-weight: 600; text-decoration: none; font-size: 0.85rem; }
:where([data-page~="blog-post-list"]) .btn-read:hover { color: var(--dark); }
:where([data-page~="blog-post-list"]) .cat-pill { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; padding: .35rem 1rem; border-radius: 2rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; margin-bottom: 1.25rem; backdrop-filter: blur(4px); }
:where([data-page~="blog-post-list"]) .cat-pill:hover { background: rgba(255,255,255,.22); color: #fff; }
:where([data-page~="blog-post-list"]) .cat-sidebar-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border-radius: .75rem; text-decoration: none; color: #475569; font-size: .875rem; font-weight: 500; transition: all .2s; }
:where([data-page~="blog-post-list"]) .cat-sidebar-item:hover, :where([data-page~="blog-post-list"]) .cat-sidebar-item.active { background: #f1f5f9; color: var(--primary); }
:where([data-page~="blog-post-list"]) .cat-thumb { width: 36px; height: 36px; border-radius: .5rem; object-fit: cover; flex-shrink: 0; background: #e2e8f0; }
:where([data-page~="blog-post-list"]) .cat-thumb-placeholder { width: 36px; height: 36px; border-radius: .5rem; background: #e2e8f0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Public token alignment: light, left-aligned page head separated by a border;
decorative gradients, dot grids and glows are hidden. */
:where([data-page~="blog-post-list"]) .page-hero {
background: var(--sunken) !important;
border-bottom: 1px solid var(--line) !important;
padding: 116px 0 44px !important;
}
:where([data-page~="blog-post-list"]) .page-hero::before, :where([data-page~="blog-post-list"]) .page-hero .glow, :where([data-page~="blog-post-list"]) .page-hero .hero-thumb-bg { display: none !important; }
:where([data-page~="blog-post-list"]) .page-hero h1 {
font-family: var(--font-display) !important;
color: var(--ink) !important;
font-weight: 600 !important;
font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
letter-spacing: -.03em !important;
}
:where([data-page~="blog-post-list"]) .page-hero p { color: var(--ink-2) !important; }
:where([data-page~="blog-post-list"]) .page-hero .btn-outline-secondary {
color: var(--ink-2) !important; border-color: var(--line) !important;
}
:where([data-page~="blog-post-list"]) .page-hero .btn-outline-secondary:hover { background: var(--paper) !important; color: var(--ink) !important; }
:where([data-page~="blog-post-list"]) .page-hero .cat-pill, :where([data-page~="blog-post-list"]) .page-hero .badge {
background: var(--accent-soft) !important; color: var(--primary) !important;
border: 0 !important;
}
:where([data-page~="blog-post-list"]) .page-hero .hero-thumb-img {
border: 1px solid var(--line) !important; box-shadow: none !important;
}
/* Page head matches the home hero: light, left-aligned, Archivo title,
closed by a thin row of figures. No type pill or floating back button. */
/* The .page-head design lives in the base_public section. */
:where([data-page~="blog-post-list"]) .cari-sejajar { margin-top: 0 !important; }
:where([data-page~="blog-post-list"]) .cari-sejajar .search-bar-card, :where([data-page~="blog-post-list"]) .cari-sejajar .card {
box-shadow: none !important; border: 1px solid var(--line) !important;
border-radius: 12px !important;
}
@media (max-width: 575.98px) {
:where([data-page~="blog-post-list"]) .page-head .ph-meta div { padding-right: 16px; margin-right: 16px; }
}
/* ==== Page: apps/core/templates/me/invoice_detail.html ==== */
@media print {
:where([data-page~="me-invoice-detail"]) .header, :where([data-page~="me-invoice-detail"]) .footer, :where([data-page~="me-invoice-detail"]) .me-sidebar, :where([data-page~="me-invoice-detail"]) .me-container { padding: 0 !important; }
:where([data-page~="me-invoice-detail"]) .btn, :where([data-page~="me-invoice-detail"]) .breadcrumb, :where([data-page~="me-invoice-detail"]) .me-sidebar, :where([data-page~="me-invoice-detail"]) .me-nav-link { display: none !important; }
:where([data-page~="me-invoice-detail"]) .me-card { box-shadow: none !important; border: 1px solid #eee !important; }
:where([data-page~="me-invoice-detail"]) .col-lg-3 { display: none !important; }
:where([data-page~="me-invoice-detail"]) .col-lg-9 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
body:where([data-page~="me-invoice-detail"]) { background: #fff !important; }
}
/* ==== Page: apps/core/templates/me/notification_list.html ==== */
:where([data-page~="me-notification-list"]) .notif-unread { background-color: rgba(41, 87, 171, 0.03) !important; border-left: 3px solid #2957ab; }
:where([data-page~="me-notification-list"]) .list-group-item-action:hover { background-color: var(--bg-body) !important; }
/* ==== Page: apps/core/templates/me/order_detail.html ==== */
:where([data-page~="me-order-detail"]) .tm-status { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .35rem;
padding: 1.25rem; border-radius: 14px; background: var(--hijau-soft, #e7f5ec); }
:where([data-page~="me-order-detail"]) .tm-ikon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: .25rem;
background: #fff; color: var(--hijau, #0c8540); }
:where([data-page~="me-order-detail"]) .tm-ikon.tm-tunggu { color: #9a5b06; } :where([data-page~="me-order-detail"]) .tm-ikon.tm-tolak { color: #ad2a2a; }
:where([data-page~="me-order-detail"]) .tm-utama { border: 1.5px solid var(--hijau-garis, #b9e2c8) !important; }
:where([data-page~="me-order-detail"]) #transfer-manual.sorot { animation: tm-sorot 1.6s ease; }
@keyframes tm-sorot { 0%, 60% { box-shadow: 0 0 0 4px rgba(12,133,64,.35); } 100% { box-shadow: none; } }
/* ==== Page: apps/core/templates/me/password_change.html ==== */
:where([data-page~="me-password-change"]) .me-card input[type="password"], :where([data-page~="me-password-change"]) .me-card input[type="text"], :where([data-page~="me-password-change"]) .me-card input[type="email"] {
border-radius: 0.75rem;
padding: 0.6rem 1rem;
border: 1px solid var(--border-color-darker);
width: 100%;
}
:where([data-page~="me-password-change"]) .me-card input:focus {
border-color: #2957ab;
box-shadow: 0 0 0 4px rgba(41, 87, 171, 0.1);
outline: none;
}
/* ==== Page: apps/helpdesk/templates/helpdesk/kontak.html ==== */
:where([data-page~="helpdesk-kontak"]) .page-hero {
background: linear-gradient(135deg, #060b1a 0%, #1e1b4b 100%);
padding: 100px 0 140px;
position: relative; overflow: hidden;
}
:where([data-page~="helpdesk-kontak"]) .page-hero::before {
content: "";
position: absolute; inset: 0;
background-image: linear-gradient(rgba(79,70,229,.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(79,70,229,.07) 1px, transparent 1px);
background-size: 48px 48px;
}
:where([data-page~="helpdesk-kontak"]) .page-hero .glow {
position: absolute;
background: radial-gradient(circle, rgba(79,70,229,.3) 0%, transparent 65%);
width: 600px; height: 600px;
bottom: -300px; left: 50%; transform: translateX(-50%); z-index: 0;
}
:where([data-page~="helpdesk-kontak"]) .page-hero .container { position: relative; z-index: 1; }
:where([data-page~="helpdesk-kontak"]) .page-hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; color: #fff; letter-spacing: -.02em; }
:where([data-page~="helpdesk-kontak"]) .page-hero p { color: #94a3b8; font-size: 1.15rem; max-width: 600px; }
:where([data-page~="helpdesk-kontak"]) .contact-card {
border: none;
border-radius: 2rem;
background: #fff;
box-shadow: 0 30px 60px rgba(0,0,0,0.12);
margin-top: -100px;
position: relative;
z-index: 10;
overflow: hidden;
}
:where([data-page~="helpdesk-kontak"]) .form-control, :where([data-page~="helpdesk-kontak"]) .form-select {
padding: 0.85rem 1.25rem;
border-radius: 1rem;
border: 1px solid #e2e8f0;
background-color: #f8fafc;
transition: all 0.2s;
}
:where([data-page~="helpdesk-kontak"]) .form-control:focus {
background-color: #fff;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(79,70,229,0.1);
}
:where([data-page~="helpdesk-kontak"]) .contact-info-strip {
background: #f8fafc;
border-top: 1px solid #f1f5f9;
padding: 2.5rem;
}
:where([data-page~="helpdesk-kontak"]) .info-box {
text-align: center;
padding: 1rem;
}
:where([data-page~="helpdesk-kontak"]) .info-icon-circle {
width: 54px;
height: 54px;
background: #fff;
color: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
margin: 0 auto 1rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
/* Public token alignment: light, left-aligned page head separated by a border;
decorative gradients, dot grids and glows are hidden. */
:where([data-page~="helpdesk-kontak"]) .page-hero {
background: var(--sunken) !important;
border-bottom: 1px solid var(--line) !important;
padding: 116px 0 44px !important;
}
:where([data-page~="helpdesk-kontak"]) .page-hero::before, :where([data-page~="helpdesk-kontak"]) .page-hero .glow, :where([data-page~="helpdesk-kontak"]) .page-hero .hero-thumb-bg { display: none !important; }
:where([data-page~="helpdesk-kontak"]) .page-hero h1 {
font-family: var(--font-display) !important;
color: var(--ink) !important;
font-weight: 600 !important;
font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
letter-spacing: -.03em !important;
}
:where([data-page~="helpdesk-kontak"]) .page-hero p { color: var(--ink-2) !important; }
:where([data-page~="helpdesk-kontak"]) .page-hero .btn-outline-secondary {
color: var(--ink-2) !important; border-color: var(--line) !important;
}
:where([data-page~="helpdesk-kontak"]) .page-hero .btn-outline-secondary:hover { background: var(--paper) !important; color: var(--ink) !important; }
:where([data-page~="helpdesk-kontak"]) .page-hero .cat-pill, :where([data-page~="helpdesk-kontak"]) .page-hero .badge {
background: var(--accent-soft) !important; color: var(--primary) !important;
border: 0 !important;
}
:where([data-page~="helpdesk-kontak"]) .page-hero .hero-thumb-img {
border: 1px solid var(--line) !important; box-shadow: none !important;
}
/* Page head: helpdesk/_kepala.html (shared with the payment page). */
:where([data-page~="helpdesk-kontak"]) .contact-card { margin-top: 0 !important; border-radius: var(--r-lg, 18px) !important;
box-shadow: 0 18px 44px -24px rgba(16,21,31,.35) !important; }
:where([data-page~="helpdesk-kontak"]) .kontak-bantu { position: sticky; top: calc(var(--tinggi-navbar, 72px) + 20px); }
:where([data-page~="helpdesk-kontak"]) .kontak-bantu .kb-item { display: flex; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
:where([data-page~="helpdesk-kontak"]) .kontak-bantu .kb-item:last-child { border-bottom: 0; }
:where([data-page~="helpdesk-kontak"]) .kontak-bantu .kb-ic {
width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
display: grid; place-items: center; background: var(--accent-soft);
color: var(--primary); font-size: .85rem;
}
:where([data-page~="helpdesk-kontak"]) .kontak-bantu .kb-j { font-weight: 600; font-size: .88rem; color: var(--ink); }
:where([data-page~="helpdesk-kontak"]) .kontak-bantu .kb-d { font-size: .82rem; color: var(--ink-2); line-height: 1.55; }
/* ── Captcha ──
Image, refresh button and input share one height. django-simple-captcha renders
the image and input as unwrapped siblings, so layout comes from our wrapper. */
/* The ~166px captcha image plus refresh button fill the column, leaving the
input too narrow; the input moves to its own row. */
:where([data-page~="helpdesk-kontak"]) .captcha-baris { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
:where([data-page~="helpdesk-kontak"]) .captcha-baris img.captcha {
height: 46px; width: auto; flex: none;
border: 1px solid var(--line); border-radius: 10px;
background: #fff; padding: 2px;
}
:where([data-page~="helpdesk-kontak"]) .captcha-baris input[type="text"] {
flex: 1 1 100%; order: 3; min-width: 0; height: 46px;
text-align: center; letter-spacing: .3em; text-transform: uppercase;
font-weight: 600;
}
:where([data-page~="helpdesk-kontak"]) .captcha-ulang {
flex: none; width: 46px; height: 46px; border-radius: 10px;
border: 1px solid var(--line); background: #fff; color: var(--ink-2);
display: grid; place-items: center; cursor: pointer;
transition: color .18s, border-color .18s;
}
:where([data-page~="helpdesk-kontak"]) .captcha-ulang:hover { color: var(--primary); border-color: var(--primary); }
:where([data-page~="helpdesk-kontak"]) .captcha-ulang.berputar i { animation: captcha-putar .5s ease; }
@keyframes captcha-putar { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* ==== Page: apps/helpdesk/templates/helpdesk/pembayaran.html ==== */
:where([data-page~="helpdesk-pembayaran"]) .bayar-langkah { counter-reset: lk; list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .85rem; }
:where([data-page~="helpdesk-pembayaran"]) .bayar-langkah li { counter-increment: lk; display: flex; gap: .85rem; align-items: flex-start; font-size: .94rem; color: var(--ink-2); }
:where([data-page~="helpdesk-pembayaran"]) .bayar-langkah li::before {
content: counter(lk); flex: 0 0 28px; height: 28px; border-radius: 50%;
display: grid; place-items: center; font-weight: 700; font-size: .82rem;
background: var(--hijau-soft); color: var(--hijau);
}
:where([data-page~="helpdesk-pembayaran"]) .bayar-langkah b { color: var(--ink); }
:where([data-page~="helpdesk-pembayaran"]) .bayar-instruksi ol { padding-left: 1.2rem; display: grid; gap: .6rem; color: var(--ink-2); }
:where([data-page~="helpdesk-pembayaran"]) .bayar-instruksi p { color: var(--ink-2); }
:where([data-page~="helpdesk-pembayaran"]) .bayar-kartu { border: 1px solid var(--line); border-radius: 18px; background: var(--paper); padding: 1.6rem; box-shadow: 0 18px 44px -30px rgba(16,21,31,.35); }
:where([data-page~="helpdesk-pembayaran"]) .bayar-kartu h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .3rem; }
:where([data-page~="helpdesk-pembayaran"]) .bayar-kartu .sub { color: var(--ink-3); font-size: .88rem; margin-bottom: 1.2rem; }
:where([data-page~="helpdesk-pembayaran"]) .bayar-kartu .form-label { font-size: .84rem; font-weight: 600; color: var(--ink-2); margin-bottom: .3rem; }
:where([data-page~="helpdesk-pembayaran"]) .bayar-kartu .errorlist { list-style: none; padding: 0; margin: .3rem 0 0; color: var(--crit); font-size: .82rem; }
:where([data-page~="helpdesk-pembayaran"]) .bayar-riwayat { margin-top: 1.25rem; font-size: .88rem; }
:where([data-page~="helpdesk-pembayaran"]) .bayar-riwayat .baris { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--line); }
:where([data-page~="helpdesk-pembayaran"]) .bayar-masuk { text-align: center; padding: 2rem 1rem; }
:where([data-page~="helpdesk-pembayaran"]) .bayar-masuk i { font-size: 1.6rem; color: var(--primary); margin-bottom: .6rem; }
/* ==== Page: apps/licensing/templates/licensing/ojs_copilot/plugin.html ==== */
:where([data-page~="licensing-ojs-copilot-plugin"]) .page-head {
background: var(--sunken); border-bottom: 1px solid var(--line);
padding: clamp(104px, 11vw, 136px) 0 clamp(28px, 4vw, 44px);
}
:where([data-page~="licensing-ojs-copilot-plugin"]) .page-head h1 {
font-family: var(--font-display); font-size: clamp(1.75rem, 3.4vw, 2.6rem);
font-weight: 600; line-height: 1.12; letter-spacing: -.035em; color: var(--ink); margin: 0;
}
:where([data-page~="licensing-ojs-copilot-plugin"]) .page-head .lead-sub { margin: 14px 0 0; color: var(--ink-2); font-size: clamp(.95rem,1.3vw,1.05rem); max-width: 46rem; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .page-head .ph-back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 14px;
font-size: .84rem; font-weight: 600; color: var(--ink-3); text-decoration: none; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .page-head .ph-back:hover { color: var(--primary); }
:where([data-page~="licensing-ojs-copilot-plugin"]) .page-head .ph-meta { display: flex; flex-wrap: wrap; gap: 0; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
:where([data-page~="licensing-ojs-copilot-plugin"]) .page-head .ph-meta div { padding-right: 24px; margin-right: 24px; border-right: 1px solid var(--line); }
:where([data-page~="licensing-ojs-copilot-plugin"]) .page-head .ph-meta div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .page-head .ph-meta b { display: block; font: 600 1.05rem/1.3 var(--font-mono); color: var(--ink); letter-spacing: -.02em; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .page-head .ph-meta span { font-size: .78rem; color: var(--ink-3); }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-wrap { padding: clamp(28px, 4vw, 44px) 0 clamp(44px, 6vw, 76px); }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-teks { max-width: 46rem; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-teks p, :where([data-page~="licensing-ojs-copilot-plugin"]) .oc-teks li { color: var(--ink-2); font-size: 1rem; line-height: 1.75; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-teks h2 {
font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
letter-spacing: -.02em; color: var(--ink); margin: clamp(32px,4vw,48px) 0 .7rem;
}
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-teks h2:first-child { margin-top: 0; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-teks strong { color: var(--ink); font-weight: 600; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-teks code {
background: var(--sunken); border: 1px solid var(--line); border-radius: 6px;
padding: .1rem .35rem; font-size: .88em; color: var(--ink);
}
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-teks pre {
background: var(--ink); color: #e8eef7; border-radius: 12px;
padding: 16px 18px; overflow-x: auto; font-size: .86rem; line-height: 1.6;
}
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-teks pre code { background: none; border: 0; color: inherit; padding: 0; }
/* Numbered steps: the number is a visual marker. */
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-langkah { counter-reset: lk; list-style: none; padding: 0; margin: 0; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-langkah > li { counter-increment: lk; position: relative; padding-left: 52px; margin-bottom: clamp(32px,4vw,48px); }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-langkah > li::before {
content: counter(lk); position: absolute; left: 0; top: 2px;
width: 34px; height: 34px; border-radius: 10px;
background: var(--accent-soft); color: var(--primary);
display: grid; place-items: center; font: 600 .95rem var(--font-mono);
}
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-langkah > li > h2 { margin-top: 0 !important; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-gbr { margin: 16px 0 0; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-gbr img { width: 100%; border: 1px solid var(--line); border-radius: 12px; display: block; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-gbr figcaption { margin-top: .5rem; font-size: .78rem; color: var(--ink-3); }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-gbr-ponsel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,190px), 1fr)); gap: 14px; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-catatan {
border: 1px solid var(--line); border-left: 3px solid var(--primary);
background: var(--sunken); border-radius: 10px; padding: 14px 16px; margin: 16px 0 0;
}
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-catatan p { margin: 0; font-size: .92rem; }
/* Download card */
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-unduh {
border: 1px solid var(--line); border-radius: 16px; background: var(--paper);
padding: clamp(22px, 3vw, 32px); max-width: 46rem;
}
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-unduh h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin: 0 0 .3rem; color: var(--ink); }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-unduh .berkas { font: 500 .92rem var(--font-mono); color: var(--ink-2); }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-unduh .btn { margin-top: 18px; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-rinci { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-rinci div { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .88rem; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-rinci dt { color: var(--ink-3); min-width: 9rem; margin: 0; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-rinci dd { margin: 0; color: var(--ink-2); word-break: break-all; }
:where([data-page~="licensing-ojs-copilot-plugin"]) .oc-rinci code { font-size: .82rem; }
/* ==== Page: apps/licensing/templates/licensing/ojs_copilot/tutorial.html ==== */
:where([data-page~="licensing-ojs-copilot-tutorial"]) .page-head {
background: var(--sunken); border-bottom: 1px solid var(--line);
padding: clamp(104px, 11vw, 136px) 0 clamp(28px, 4vw, 44px);
}
:where([data-page~="licensing-ojs-copilot-tutorial"]) .page-head h1 {
font-family: var(--font-display); font-size: clamp(1.75rem, 3.4vw, 2.6rem);
font-weight: 600; line-height: 1.12; letter-spacing: -.035em; color: var(--ink); margin: 0;
}
:where([data-page~="licensing-ojs-copilot-tutorial"]) .page-head .lead-sub { margin: 14px 0 0; color: var(--ink-2); font-size: clamp(.95rem,1.3vw,1.05rem); max-width: 46rem; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .page-head .ph-back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 14px;
font-size: .84rem; font-weight: 600; color: var(--ink-3); text-decoration: none; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .page-head .ph-back:hover { color: var(--primary); }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .page-head .ph-meta { display: flex; flex-wrap: wrap; gap: 0; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .page-head .ph-meta div { padding-right: 24px; margin-right: 24px; border-right: 1px solid var(--line); }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .page-head .ph-meta div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .page-head .ph-meta b { display: block; font: 600 1.05rem/1.3 var(--font-mono); color: var(--ink); letter-spacing: -.02em; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .page-head .ph-meta span { font-size: .78rem; color: var(--ink-3); }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-wrap { padding: clamp(28px, 4vw, 44px) 0 clamp(44px, 6vw, 76px); }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-teks { max-width: 46rem; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-teks p, :where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-teks li { color: var(--ink-2); font-size: 1rem; line-height: 1.75; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-teks h2 {
font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
letter-spacing: -.02em; color: var(--ink); margin: clamp(32px,4vw,48px) 0 .7rem;
}
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-teks h2:first-child { margin-top: 0; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-teks strong { color: var(--ink); font-weight: 600; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-teks code {
background: var(--sunken); border: 1px solid var(--line); border-radius: 6px;
padding: .1rem .35rem; font-size: .88em; color: var(--ink);
}
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-teks pre {
background: var(--ink); color: #e8eef7; border-radius: 12px;
padding: 16px 18px; overflow-x: auto; font-size: .86rem; line-height: 1.6;
}
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-teks pre code { background: none; border: 0; color: inherit; padding: 0; }
/* Numbered steps: the number is a visual marker. */
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-langkah { counter-reset: lk; list-style: none; padding: 0; margin: 0; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-langkah > li { counter-increment: lk; position: relative; padding-left: 52px; margin-bottom: clamp(32px,4vw,48px); }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-langkah > li::before {
content: counter(lk); position: absolute; left: 0; top: 2px;
width: 34px; height: 34px; border-radius: 10px;
background: var(--accent-soft); color: var(--primary);
display: grid; place-items: center; font: 600 .95rem var(--font-mono);
}
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-langkah > li > h2 { margin-top: 0 !important; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-gbr { margin: 16px 0 0; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-gbr img { width: 100%; border: 1px solid var(--line); border-radius: 12px; display: block; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-gbr figcaption { margin-top: .5rem; font-size: .78rem; color: var(--ink-3); }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-gbr-ponsel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,190px), 1fr)); gap: 14px; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-catatan {
border: 1px solid var(--line); border-left: 3px solid var(--primary);
background: var(--sunken); border-radius: 10px; padding: 14px 16px; margin: 16px 0 0;
}
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-catatan p { margin: 0; font-size: .92rem; }
/* Download card */
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-unduh {
border: 1px solid var(--line); border-radius: 16px; background: var(--paper);
padding: clamp(22px, 3vw, 32px); max-width: 46rem;
}
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-unduh h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin: 0 0 .3rem; color: var(--ink); }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-unduh .berkas { font: 500 .92rem var(--font-mono); color: var(--ink-2); }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-unduh .btn { margin-top: 18px; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-rinci { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-rinci div { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .88rem; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-rinci dt { color: var(--ink-3); min-width: 9rem; margin: 0; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-rinci dd { margin: 0; color: var(--ink-2); word-break: break-all; }
:where([data-page~="licensing-ojs-copilot-tutorial"]) .oc-rinci code { font-size: .82rem; }
/* ==== Page: apps/portofolio/templates/portofolio/public_detail.html ==== */
:where([data-page~="portofolio-detail"]) .pf-wrap { padding: clamp(28px, 4vw, 44px) 0 clamp(40px, 6vw, 72px); }
/* ── Filter bar + search ──
Scrolls horizontally on phones instead of wrapping into many rows. */
:where([data-page~="portofolio-detail"]) .pf-bar {
display: flex; align-items: center; gap: 14px;
margin-bottom: clamp(20px, 3vw, 30px);
}
:where([data-page~="portofolio-detail"]) .pf-tapis {
display: flex; gap: .5rem; flex: 1; min-width: 0;
overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
:where([data-page~="portofolio-detail"]) .pf-tapis::-webkit-scrollbar { display: none; }
:where([data-page~="portofolio-detail"]) .pf-tapis a {
display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
padding: .5rem .95rem; border: 1px solid var(--line); border-radius: var(--r-pill);
background: var(--paper); color: var(--ink-2);
font-size: .86rem; font-weight: 500; text-decoration: none;
transition: border-color .18s, color .18s, background .18s;
}
:where([data-page~="portofolio-detail"]) .pf-tapis a i {
font-style: normal; font-size: .72rem; font-weight: 600; color: var(--ink-3);
background: var(--sunken); border-radius: var(--r-pill); padding: .05rem .4rem;
}
:where([data-page~="portofolio-detail"]) .pf-tapis a:hover { border-color: var(--primary); color: var(--primary); }
:where([data-page~="portofolio-detail"]) .pf-tapis a.aktif { background: var(--primary); border-color: var(--primary); color: var(--accent-ink); }
:where([data-page~="portofolio-detail"]) .pf-tapis a.aktif i { color: var(--accent-ink); background: rgba(255, 255, 255, .18); }
:where([data-page~="portofolio-detail"]) .pf-cari { position: relative; flex: 0 0 auto; }
:where([data-page~="portofolio-detail"]) .pf-cari input {
width: 15rem; max-width: 42vw;
padding: .5rem .85rem .5rem 2.1rem;
border: 1px solid var(--line); border-radius: var(--r-pill);
background: var(--paper); color: var(--ink); font-size: .86rem;
}
:where([data-page~="portofolio-detail"]) .pf-cari input:focus { outline: none; border-color: var(--primary); }
:where([data-page~="portofolio-detail"]) .pf-cari i {
position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
font-size: .78rem; color: var(--ink-3); pointer-events: none;
}
/* ── Works grid ── */
:where([data-page~="portofolio-detail"]) .pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 22px; }
:where([data-page~="portofolio-detail"]) .pf-kartu {
position: relative;
border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
overflow: hidden; display: flex; flex-direction: column; min-width: 0;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
:where([data-page~="portofolio-detail"]) .pf-kartu:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--primary) 50%, var(--line));
box-shadow: 0 18px 38px -26px rgba(16, 21, 31, .6);
}
/* Image is flush with the card edge (no nested frame). */
:where([data-page~="portofolio-detail"]) .pf-gbr { display: block; position: relative; background: var(--sunken); }
:where([data-page~="portofolio-detail"]) .pf-gbr img {
width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
display: block; border-bottom: 1px solid var(--line);
}
:where([data-page~="portofolio-detail"]) .pf-kartu:hover .pf-gbr img { opacity: .94; }
/* Work type is overlaid on the image instead of taking a text row. */
:where([data-page~="portofolio-detail"]) .pf-jenis {
position: absolute; left: 10px; top: 10px; z-index: 1;
padding: .22rem .6rem; border-radius: var(--r-pill);
background: rgba(255, 255, 255, .92); border: 1px solid var(--line);
font-size: .7rem; font-weight: 600; color: var(--ink-2);
backdrop-filter: blur(6px);
}
:where([data-page~="portofolio-detail"]) .pf-kartu--produk .pf-jenis { background: var(--primary); border-color: var(--primary); color: var(--accent-ink); }
/* Login-gated works have no useful screenshot; show the work type instead
of an empty grey box. */
:where([data-page~="portofolio-detail"]) .pf-kosong {
display: grid; place-items: center; aspect-ratio: 16 / 10;
background: var(--sunken); border-bottom: 1px solid var(--line);
color: var(--ink-3); font: 500 .82rem var(--font-mono); text-align: center; padding: 0 12px;
}
:where([data-page~="portofolio-detail"]) .pf-isi { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
:where([data-page~="portofolio-detail"]) .pf-isi h3 {
font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
letter-spacing: -.015em; margin: 0 0 .25rem; line-height: 1.35;
}
:where([data-page~="portofolio-detail"]) .pf-isi h3 a { color: var(--ink); text-decoration: none; }
:where([data-page~="portofolio-detail"]) .pf-isi h3 a::after { content: ""; position: absolute; inset: 0; }
:where([data-page~="portofolio-detail"]) .pf-kartu:hover h3 a { color: var(--primary); }
:where([data-page~="portofolio-detail"]) .pf-klien { margin: 0 0 .6rem; font-size: .8rem; color: var(--ink-3); }
/* Clamp by lines, not word count, so card bottoms stay aligned. */
:where([data-page~="portofolio-detail"]) .pf-ringkas {
margin: 0 0 1rem; font-size: .86rem; line-height: 1.6; color: var(--ink-2);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
:where([data-page~="portofolio-detail"]) .pf-kaki {
margin-top: auto; display: flex; flex-wrap: wrap; align-items: center;
gap: .5rem; justify-content: space-between;
padding-top: .85rem; border-top: 1px solid var(--line);
}
:where([data-page~="portofolio-detail"]) .pf-cips { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
:where([data-page~="portofolio-detail"]) .pf-cip {
font: 500 .7rem var(--font-mono); color: var(--ink-3);
background: var(--sunken); border: 1px solid var(--line);
border-radius: var(--r-xs); padding: .18rem .45rem; white-space: nowrap;
}
:where([data-page~="portofolio-detail"]) .pf-tautan {
position: relative; z-index: 1;
font-size: .78rem; font-weight: 600; color: var(--primary); text-decoration: none;
white-space: nowrap;
}
:where([data-page~="portofolio-detail"]) .pf-tautan i { font-size: .66rem; }
:where([data-page~="portofolio-detail"]) .pf-nihil {
border: 1px dashed var(--line); border-radius: var(--r-lg);
background: var(--sunken); color: var(--ink-3);
padding: clamp(32px, 6vw, 56px) 20px; text-align: center;
}
:where([data-page~="portofolio-detail"]) .pf-nihil a { color: var(--primary); font-weight: 600; text-decoration: none; }
/* ── Pagination: same shape as the store and blog ── */
:where([data-page~="portofolio-detail"]) .pf-halaman { display: flex; gap: .4rem; align-items: center; justify-content: center; margin-top: 36px; }
:where([data-page~="portofolio-detail"]) .pf-halaman a, :where([data-page~="portofolio-detail"]) .pf-halaman span {
min-width: 2.25rem; height: 2.25rem; padding: 0 .7rem;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--paper); color: var(--ink-2);
font-size: .86rem; font-weight: 500; text-decoration: none;
}
:where([data-page~="portofolio-detail"]) .pf-halaman a:hover { border-color: var(--primary); color: var(--primary); }
:where([data-page~="portofolio-detail"]) .pf-halaman .aktif { background: var(--primary); border-color: var(--primary); color: var(--accent-ink); }
:where([data-page~="portofolio-detail"]) .pf-halaman .lompat { border: 0; background: none; color: var(--ink-3); min-width: 1rem; padding: 0 .2rem; }
/* Detail page: two-column head, description left, the work itself right. */
:where([data-page~="portofolio-detail"]) .pfd-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(28px, 4vw, 56px); align-items: center;
}
@media (max-width: 900px) { :where([data-page~="portofolio-detail"]) .pfd-grid { grid-template-columns: 1fr; } }
:where([data-page~="portofolio-detail"]) .pf-remah {
display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
margin-bottom: 14px; font-size: .8rem; color: var(--ink-3);
}
:where([data-page~="portofolio-detail"]) .pf-remah a { color: var(--ink-3); text-decoration: none; }
:where([data-page~="portofolio-detail"]) .pf-remah a:hover { color: var(--primary); }
:where([data-page~="portofolio-detail"]) .pf-remah span[aria-current] { color: var(--ink-2); font-weight: 500; }
/* Dek: short summary in the head so the left column balances the screenshot.
The full text stays below. */
:where([data-page~="portofolio-detail"]) .pfd-dek {
margin: 16px 0 0; max-width: 34rem;
color: var(--ink-2); font-size: clamp(.95rem, 1.2vw, 1.03rem); line-height: 1.7;
}
:where([data-page~="portofolio-detail"]) .pfd-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 22px 0 0; }
:where([data-page~="portofolio-detail"]) .pfd-meta div {
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--paper); padding: .5rem .8rem; min-width: 0;
}
:where([data-page~="portofolio-detail"]) .pfd-meta dt { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .15rem; }
:where([data-page~="portofolio-detail"]) .pfd-meta dd { margin: 0; font-size: .88rem; font-weight: 600; color: var(--ink); }
:where([data-page~="portofolio-detail"]) .pfd-aksi { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 26px; }
:where([data-page~="portofolio-detail"]) .pfd-aksi .tombol {
display: inline-flex; align-items: center; gap: .5rem;
padding: .65rem 1.2rem; border-radius: var(--r-md);
font-size: .9rem; font-weight: 600; text-decoration: none;
border: 1px solid var(--primary); background: var(--primary); color: var(--accent-ink);
transition: filter .18s ease;
}
:where([data-page~="portofolio-detail"]) .pfd-aksi .tombol:hover { filter: brightness(1.08); }
:where([data-page~="portofolio-detail"]) .pfd-aksi .tombol.lunak { background: var(--paper); color: var(--primary); }
:where([data-page~="portofolio-detail"]) .pfd-aksi .tombol i { font-size: .78rem; }
/* Browser window frame: makes clear the screenshot shows another app,
not part of this page. */
:where([data-page~="portofolio-detail"]) .pfd-layar {
margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg);
background: var(--paper); overflow: hidden;
box-shadow: 0 30px 60px -40px rgba(16, 21, 31, .55);
}
:where([data-page~="portofolio-detail"]) .pfd-bilah {
display: flex; align-items: center; gap: .35rem;
padding: .55rem .75rem; border-bottom: 1px solid var(--line); background: var(--sunken);
}
:where([data-page~="portofolio-detail"]) .pfd-bilah b { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
:where([data-page~="portofolio-detail"]) .pfd-bilah span {
flex: 1; margin-left: .4rem; height: 1.15rem; border-radius: var(--r-pill);
background: var(--paper); border: 1px solid var(--line);
font: 500 .68rem var(--font-mono); color: var(--ink-3);
display: flex; align-items: center; padding: 0 .6rem;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
:where([data-page~="portofolio-detail"]) .pfd-layar > a { display: block; }
:where([data-page~="portofolio-detail"]) .pfd-layar img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
:where([data-page~="portofolio-detail"]) .pfd-layar figcaption { padding: .6rem .8rem; font-size: .78rem; color: var(--ink-3); border-top: 1px solid var(--line); }
/* Screenshot strip: one scrolling row instead of a tall grid. */
:where([data-page~="portofolio-detail"]) .pfd-strip { display: flex; gap: .55rem; margin-top: .7rem; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
:where([data-page~="portofolio-detail"]) .pfd-strip a {
flex: 0 0 auto; width: 92px; border: 1px solid var(--line); border-radius: var(--r-sm);
overflow: hidden; display: block; opacity: .62; transition: opacity .18s, border-color .18s;
}
:where([data-page~="portofolio-detail"]) .pfd-strip a:hover { opacity: 1; }
:where([data-page~="portofolio-detail"]) .pfd-strip a.aktif { opacity: 1; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
:where([data-page~="portofolio-detail"]) .pfd-strip img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; display: block; }
:where([data-page~="portofolio-detail"]) .pfd-kosong {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .55rem; aspect-ratio: 16 / 11; text-align: center; padding: 24px 28px;
border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--sunken);
}
:where([data-page~="portofolio-detail"]) .pfd-kosong i { font-size: 1.3rem; color: var(--ink-3); opacity: .55; }
:where([data-page~="portofolio-detail"]) .pfd-kosong b { font: 600 .85rem var(--font-mono); color: var(--ink-2); }
:where([data-page~="portofolio-detail"]) .pfd-kosong span { font-size: .85rem; line-height: 1.6; color: var(--ink-3); max-width: 24rem; }
:where([data-page~="portofolio-detail"]) .pfd-teks { max-width: 44rem; }
:where([data-page~="portofolio-detail"]) .pfd-teks h2 {
font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
letter-spacing: -.02em; color: var(--ink); margin: 0 0 .9rem;
}
:where([data-page~="portofolio-detail"]) .pfd-teks p { color: var(--ink-2); font-size: 1rem; line-height: 1.75; margin: 0 0 1.1rem; }
:where([data-page~="portofolio-detail"]) .pfd-teks p:last-child { margin-bottom: 0; }
:where([data-page~="portofolio-detail"]) .pf-lain { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
:where([data-page~="portofolio-detail"]) .pf-lain h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin: 0 0 18px; }
/* Closing CTA so the detail page does not end in a dead end. */
:where([data-page~="portofolio-detail"]) .pfd-ajak {
margin-top: clamp(40px, 6vw, 72px);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 18px; padding: clamp(22px, 3vw, 32px);
border: 1px solid var(--line); border-radius: var(--r-xl);
background: linear-gradient(135deg,
color-mix(in srgb, var(--primary) 7%, var(--paper)),
var(--paper) 70%);
}
:where([data-page~="portofolio-detail"]) .pfd-ajak h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 0 0 .3rem; }
:where([data-page~="portofolio-detail"]) .pfd-ajak p { margin: 0; font-size: .9rem; color: var(--ink-2); max-width: 36rem; }
/* ==== Page: apps/portofolio/templates/portofolio/public_list.html ==== */
:where([data-page~="portofolio-list"]) .pf-wrap { padding: clamp(28px, 4vw, 44px) 0 clamp(40px, 6vw, 72px); }
/* ── Filter bar + search ──
Scrolls horizontally on phones instead of wrapping into many rows. */
:where([data-page~="portofolio-list"]) .pf-bar {
display: flex; align-items: center; gap: 14px;
margin-bottom: clamp(20px, 3vw, 30px);
}
:where([data-page~="portofolio-list"]) .pf-tapis {
display: flex; gap: .5rem; flex: 1; min-width: 0;
overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
:where([data-page~="portofolio-list"]) .pf-tapis::-webkit-scrollbar { display: none; }
:where([data-page~="portofolio-list"]) .pf-tapis a {
display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
padding: .5rem .95rem; border: 1px solid var(--line); border-radius: var(--r-pill);
background: var(--paper); color: var(--ink-2);
font-size: .86rem; font-weight: 500; text-decoration: none;
transition: border-color .18s, color .18s, background .18s;
}
:where([data-page~="portofolio-list"]) .pf-tapis a i {
font-style: normal; font-size: .72rem; font-weight: 600; color: var(--ink-3);
background: var(--sunken); border-radius: var(--r-pill); padding: .05rem .4rem;
}
:where([data-page~="portofolio-list"]) .pf-tapis a:hover { border-color: var(--primary); color: var(--primary); }
:where([data-page~="portofolio-list"]) .pf-tapis a.aktif { background: var(--primary); border-color: var(--primary); color: var(--accent-ink); }
:where([data-page~="portofolio-list"]) .pf-tapis a.aktif i { color: var(--accent-ink); background: rgba(255, 255, 255, .18); }
:where([data-page~="portofolio-list"]) .pf-cari { position: relative; flex: 0 0 auto; }
:where([data-page~="portofolio-list"]) .pf-cari input {
width: 15rem; max-width: 42vw;
padding: .5rem .85rem .5rem 2.1rem;
border: 1px solid var(--line); border-radius: var(--r-pill);
background: var(--paper); color: var(--ink); font-size: .86rem;
}
:where([data-page~="portofolio-list"]) .pf-cari input:focus { outline: none; border-color: var(--primary); }
:where([data-page~="portofolio-list"]) .pf-cari i {
position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
font-size: .78rem; color: var(--ink-3); pointer-events: none;
}
/* ── Works grid ── */
:where([data-page~="portofolio-list"]) .pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 22px; }
:where([data-page~="portofolio-list"]) .pf-kartu {
position: relative;
border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
overflow: hidden; display: flex; flex-direction: column; min-width: 0;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
:where([data-page~="portofolio-list"]) .pf-kartu:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--primary) 50%, var(--line));
box-shadow: 0 18px 38px -26px rgba(16, 21, 31, .6);
}
/* Image is flush with the card edge (no nested frame). */
:where([data-page~="portofolio-list"]) .pf-gbr { display: block; position: relative; background: var(--sunken); }
:where([data-page~="portofolio-list"]) .pf-gbr img {
width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
display: block; border-bottom: 1px solid var(--line);
}
:where([data-page~="portofolio-list"]) .pf-kartu:hover .pf-gbr img { opacity: .94; }
/* Work type is overlaid on the image instead of taking a text row. */
:where([data-page~="portofolio-list"]) .pf-jenis {
position: absolute; left: 10px; top: 10px; z-index: 1;
padding: .22rem .6rem; border-radius: var(--r-pill);
background: rgba(255, 255, 255, .92); border: 1px solid var(--line);
font-size: .7rem; font-weight: 600; color: var(--ink-2);
backdrop-filter: blur(6px);
}
:where([data-page~="portofolio-list"]) .pf-kartu--produk .pf-jenis { background: var(--primary); border-color: var(--primary); color: var(--accent-ink); }
/* Login-gated works have no useful screenshot; show the work type instead
of an empty grey box. */
:where([data-page~="portofolio-list"]) .pf-kosong {
display: grid; place-items: center; aspect-ratio: 16 / 10;
background: var(--sunken); border-bottom: 1px solid var(--line);
color: var(--ink-3); font: 500 .82rem var(--font-mono); text-align: center; padding: 0 12px;
}
:where([data-page~="portofolio-list"]) .pf-isi { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
:where([data-page~="portofolio-list"]) .pf-isi h3 {
font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
letter-spacing: -.015em; margin: 0 0 .25rem; line-height: 1.35;
}
:where([data-page~="portofolio-list"]) .pf-isi h3 a { color: var(--ink); text-decoration: none; }
:where([data-page~="portofolio-list"]) .pf-isi h3 a::after { content: ""; position: absolute; inset: 0; }
:where([data-page~="portofolio-list"]) .pf-kartu:hover h3 a { color: var(--primary); }
:where([data-page~="portofolio-list"]) .pf-klien { margin: 0 0 .6rem; font-size: .8rem; color: var(--ink-3); }
/* Clamp by lines, not word count, so card bottoms stay aligned. */
:where([data-page~="portofolio-list"]) .pf-ringkas {
margin: 0 0 1rem; font-size: .86rem; line-height: 1.6; color: var(--ink-2);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
:where([data-page~="portofolio-list"]) .pf-kaki {
margin-top: auto; display: flex; flex-wrap: wrap; align-items: center;
gap: .5rem; justify-content: space-between;
padding-top: .85rem; border-top: 1px solid var(--line);
}
:where([data-page~="portofolio-list"]) .pf-cips { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
:where([data-page~="portofolio-list"]) .pf-cip {
font: 500 .7rem var(--font-mono); color: var(--ink-3);
background: var(--sunken); border: 1px solid var(--line);
border-radius: var(--r-xs); padding: .18rem .45rem; white-space: nowrap;
}
:where([data-page~="portofolio-list"]) .pf-tautan {
position: relative; z-index: 1;
font-size: .78rem; font-weight: 600; color: var(--primary); text-decoration: none;
white-space: nowrap;
}
:where([data-page~="portofolio-list"]) .pf-tautan i { font-size: .66rem; }
:where([data-page~="portofolio-list"]) .pf-nihil {
border: 1px dashed var(--line); border-radius: var(--r-lg);
background: var(--sunken); color: var(--ink-3);
padding: clamp(32px, 6vw, 56px) 20px; text-align: center;
}
:where([data-page~="portofolio-list"]) .pf-nihil a { color: var(--primary); font-weight: 600; text-decoration: none; }
/* ── Pagination: same shape as the store and blog ── */
:where([data-page~="portofolio-list"]) .pf-halaman { display: flex; gap: .4rem; align-items: center; justify-content: center; margin-top: 36px; }
:where([data-page~="portofolio-list"]) .pf-halaman a, :where([data-page~="portofolio-list"]) .pf-halaman span {
min-width: 2.25rem; height: 2.25rem; padding: 0 .7rem;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--paper); color: var(--ink-2);
font-size: .86rem; font-weight: 500; text-decoration: none;
}
:where([data-page~="portofolio-list"]) .pf-halaman a:hover { border-color: var(--primary); color: var(--primary); }
:where([data-page~="portofolio-list"]) .pf-halaman .aktif { background: var(--primary); border-color: var(--primary); color: var(--accent-ink); }
:where([data-page~="portofolio-list"]) .pf-halaman .lompat { border: 0; background: none; color: var(--ink-3); min-width: 1rem; padding: 0 .2rem; }
/* Detail page: two-column head, description left, the work itself right. */
:where([data-page~="portofolio-list"]) .pfd-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(28px, 4vw, 56px); align-items: center;
}
@media (max-width: 900px) { :where([data-page~="portofolio-list"]) .pfd-grid { grid-template-columns: 1fr; } }
:where([data-page~="portofolio-list"]) .pf-remah {
display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
margin-bottom: 14px; font-size: .8rem; color: var(--ink-3);
}
:where([data-page~="portofolio-list"]) .pf-remah a { color: var(--ink-3); text-decoration: none; }
:where([data-page~="portofolio-list"]) .pf-remah a:hover { color: var(--primary); }
:where([data-page~="portofolio-list"]) .pf-remah span[aria-current] { color: var(--ink-2); font-weight: 500; }
/* Dek: short summary in the head so the left column balances the screenshot.
The full text stays below. */
:where([data-page~="portofolio-list"]) .pfd-dek {
margin: 16px 0 0; max-width: 34rem;
color: var(--ink-2); font-size: clamp(.95rem, 1.2vw, 1.03rem); line-height: 1.7;
}
:where([data-page~="portofolio-list"]) .pfd-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 22px 0 0; }
:where([data-page~="portofolio-list"]) .pfd-meta div {
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--paper); padding: .5rem .8rem; min-width: 0;
}
:where([data-page~="portofolio-list"]) .pfd-meta dt { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .15rem; }
:where([data-page~="portofolio-list"]) .pfd-meta dd { margin: 0; font-size: .88rem; font-weight: 600; color: var(--ink); }
:where([data-page~="portofolio-list"]) .pfd-aksi { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 26px; }
:where([data-page~="portofolio-list"]) .pfd-aksi .tombol {
display: inline-flex; align-items: center; gap: .5rem;
padding: .65rem 1.2rem; border-radius: var(--r-md);
font-size: .9rem; font-weight: 600; text-decoration: none;
border: 1px solid var(--primary); background: var(--primary); color: var(--accent-ink);
transition: filter .18s ease;
}
:where([data-page~="portofolio-list"]) .pfd-aksi .tombol:hover { filter: brightness(1.08); }
:where([data-page~="portofolio-list"]) .pfd-aksi .tombol.lunak { background: var(--paper); color: var(--primary); }
:where([data-page~="portofolio-list"]) .pfd-aksi .tombol i { font-size: .78rem; }
/* Browser window frame: makes clear the screenshot shows another app,
not part of this page. */
:where([data-page~="portofolio-list"]) .pfd-layar {
margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg);
background: var(--paper); overflow: hidden;
box-shadow: 0 30px 60px -40px rgba(16, 21, 31, .55);
}
:where([data-page~="portofolio-list"]) .pfd-bilah {
display: flex; align-items: center; gap: .35rem;
padding: .55rem .75rem; border-bottom: 1px solid var(--line); background: var(--sunken);
}
:where([data-page~="portofolio-list"]) .pfd-bilah b { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
:where([data-page~="portofolio-list"]) .pfd-bilah span {
flex: 1; margin-left: .4rem; height: 1.15rem; border-radius: var(--r-pill);
background: var(--paper); border: 1px solid var(--line);
font: 500 .68rem var(--font-mono); color: var(--ink-3);
display: flex; align-items: center; padding: 0 .6rem;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
:where([data-page~="portofolio-list"]) .pfd-layar > a { display: block; }
:where([data-page~="portofolio-list"]) .pfd-layar img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
:where([data-page~="portofolio-list"]) .pfd-layar figcaption { padding: .6rem .8rem; font-size: .78rem; color: var(--ink-3); border-top: 1px solid var(--line); }
/* Screenshot strip: one scrolling row instead of a tall grid. */
:where([data-page~="portofolio-list"]) .pfd-strip { display: flex; gap: .55rem; margin-top: .7rem; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
:where([data-page~="portofolio-list"]) .pfd-strip a {
flex: 0 0 auto; width: 92px; border: 1px solid var(--line); border-radius: var(--r-sm);
overflow: hidden; display: block; opacity: .62; transition: opacity .18s, border-color .18s;
}
:where([data-page~="portofolio-list"]) .pfd-strip a:hover { opacity: 1; }
:where([data-page~="portofolio-list"]) .pfd-strip a.aktif { opacity: 1; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
:where([data-page~="portofolio-list"]) .pfd-strip img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; display: block; }
:where([data-page~="portofolio-list"]) .pfd-kosong {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .55rem; aspect-ratio: 16 / 11; text-align: center; padding: 24px 28px;
border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--sunken);
}
:where([data-page~="portofolio-list"]) .pfd-kosong i { font-size: 1.3rem; color: var(--ink-3); opacity: .55; }
:where([data-page~="portofolio-list"]) .pfd-kosong b { font: 600 .85rem var(--font-mono); color: var(--ink-2); }
:where([data-page~="portofolio-list"]) .pfd-kosong span { font-size: .85rem; line-height: 1.6; color: var(--ink-3); max-width: 24rem; }
:where([data-page~="portofolio-list"]) .pfd-teks { max-width: 44rem; }
:where([data-page~="portofolio-list"]) .pfd-teks h2 {
font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
letter-spacing: -.02em; color: var(--ink); margin: 0 0 .9rem;
}
:where([data-page~="portofolio-list"]) .pfd-teks p { color: var(--ink-2); font-size: 1rem; line-height: 1.75; margin: 0 0 1.1rem; }
:where([data-page~="portofolio-list"]) .pfd-teks p:last-child { margin-bottom: 0; }
:where([data-page~="portofolio-list"]) .pf-lain { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
:where([data-page~="portofolio-list"]) .pf-lain h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin: 0 0 18px; }
/* Closing CTA so the detail page does not end in a dead end. */
:where([data-page~="portofolio-list"]) .pfd-ajak {
margin-top: clamp(40px, 6vw, 72px);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 18px; padding: clamp(22px, 3vw, 32px);
border: 1px solid var(--line); border-radius: var(--r-xl);
background: linear-gradient(135deg,
color-mix(in srgb, var(--primary) 7%, var(--paper)),
var(--paper) 70%);
}
:where([data-page~="portofolio-list"]) .pfd-ajak h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 0 0 .3rem; }
:where([data-page~="portofolio-list"]) .pfd-ajak p { margin: 0; font-size: .9rem; color: var(--ink-2); max-width: 36rem; }
/* ==== Page: apps/staff/templates/staff/public_staff_list.html ==== */
:where([data-page~="staff-staff-list"]) .staff-hero {
background: linear-gradient(135deg, #060b1a 0%, #1e1b4b 100%);
padding: 100px 0 80px;
position: relative; overflow: hidden;
}
:where([data-page~="staff-staff-list"]) .staff-hero::before {
content: "";
position: absolute; inset: 0;
background-image: linear-gradient(rgba(79,70,229,.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(79,70,229,.07) 1px, transparent 1px);
background-size: 48px 48px;
}
:where([data-page~="staff-staff-list"]) .staff-hero .glow {
position: absolute;
background: radial-gradient(circle, rgba(79,70,229,.3) 0%, transparent 65%);
width: 500px; height: 500px;
top: -120px; right: -120px; z-index: 0;
}
:where([data-page~="staff-staff-list"]) .staff-hero .container { position: relative; z-index: 1; }
:where([data-page~="staff-staff-list"]) .staff-card {
background: #fff;
border-radius: 2rem;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid #f1f5f9;
height: 100%;
}
:where([data-page~="staff-staff-list"]) .staff-card:hover {
transform: translateY(-15px);
box-shadow: 0 30px 60px rgba(0,0,0,0.1);
border-color: var(--primary);
}
:where([data-page~="staff-staff-list"]) .staff-img-wrapper {
position: relative;
padding-top: 100%; /* 1:1 Aspect Ratio */
overflow: hidden;
}
:where([data-page~="staff-staff-list"]) .staff-img {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
:where([data-page~="staff-staff-list"]) .staff-card:hover .staff-img { transform: scale(1.1); }
:where([data-page~="staff-staff-list"]) .staff-info { padding: 2rem; text-align: center; }
:where([data-page~="staff-staff-list"]) .staff-name { font-weight: 800; color: #0f172a; margin-bottom: 0.25rem; font-size: 1.25rem; }
:where([data-page~="staff-staff-list"]) .staff-position { color: var(--primary); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }
:where([data-page~="staff-staff-list"]) .staff-social { margin-top: 1.5rem; display: flex; justify-content: center; gap: 1rem; }
:where([data-page~="staff-staff-list"]) .social-icon {
width: 36px; height: 36px; border-radius: 50%; background: #f8fafc;
display: flex; align-items: center; justify-content: center;
color: #64748b; transition: all 0.3s; text-decoration: none;
}
:where([data-page~="staff-staff-list"]) .social-icon:hover { background: var(--primary); color: #fff; }
/* Public token alignment: light, left-aligned page head separated by a border;
decorative gradients, dot grids and glows are hidden. */
:where([data-page~="staff-staff-list"]) .page-hero {
background: var(--sunken) !important;
border-bottom: 1px solid var(--line) !important;
padding: 116px 0 44px !important;
}
:where([data-page~="staff-staff-list"]) .page-hero::before, :where([data-page~="staff-staff-list"]) .page-hero .glow, :where([data-page~="staff-staff-list"]) .page-hero .hero-thumb-bg { display: none !important; }
:where([data-page~="staff-staff-list"]) .page-hero h1 {
font-family: var(--font-display) !important;
color: var(--ink) !important;
font-weight: 600 !important;
font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
letter-spacing: -.03em !important;
}
:where([data-page~="staff-staff-list"]) .page-hero p { color: var(--ink-2) !important; }
:where([data-page~="staff-staff-list"]) .page-hero .btn-outline-secondary {
color: var(--ink-2) !important; border-color: var(--line) !important;
}
:where([data-page~="staff-staff-list"]) .page-hero .btn-outline-secondary:hover { background: var(--paper) !important; color: var(--ink) !important; }
:where([data-page~="staff-staff-list"]) .page-hero .cat-pill, :where([data-page~="staff-staff-list"]) .page-hero .badge {
background: var(--accent-soft) !important; color: var(--primary) !important;
border: 0 !important;
}
:where([data-page~="staff-staff-list"]) .page-hero .hero-thumb-img {
border: 1px solid var(--line) !important; box-shadow: none !important;
}
/* ==== Page: apps/store/templates/store/preview.html ==== */
/* The fixed-top navbar is 67px tall. --pv-nav is both the top safe offset
and the sticky bar's stop position. */
:where([data-page~="store-preview"]) .pv-laman { --pv-nav: 67px; padding-top: var(--pv-nav); }
:where([data-page~="store-preview"]) .pv-bar { position: sticky; top: var(--pv-nav); z-index: 20; display: flex; flex-wrap: wrap;
align-items: center; gap: .75rem 1rem; padding: .7rem clamp(12px, 2vw, 20px);
background: var(--paper); border-bottom: 1px solid var(--line); }
:where([data-page~="store-preview"]) .pv-judul { font-weight: 700; font-size: 1rem; margin: 0; }
:where([data-page~="store-preview"]) .pv-harga { font-size: var(--fs-md); color: var(--ink-3); }
:where([data-page~="store-preview"]) .pv-kel { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
:where([data-page~="store-preview"]) .pv-label { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--ink-3); }
:where([data-page~="store-preview"]) .pv-skin { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .6rem;
border: 1px solid var(--line); border-radius: 999px; background: transparent;
font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; text-decoration: none; }
:where([data-page~="store-preview"]) .pv-skin:hover { border-color: var(--primary); color: var(--ink); }
:where([data-page~="store-preview"]) .pv-skin[aria-current="true"] { border-color: var(--primary); color: var(--primary); font-weight: 600; }
:where([data-page~="store-preview"]) .pv-warna { display: inline-flex; border-radius: 999px; overflow: hidden; }
:where([data-page~="store-preview"]) .pv-warna i { width: 10px; height: 10px; display: block; }
:where([data-page~="store-preview"]) .pv-alat { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
:where([data-page~="store-preview"]) .pv-lebar { border: 1px solid var(--line); background: transparent; border-radius: var(--r-md);
padding: .32rem .6rem; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
:where([data-page~="store-preview"]) .pv-lebar[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); }
:where([data-page~="store-preview"]) .pv-panggung { background: var(--bg-2, #eef1f5); padding: clamp(10px, 2vw, 22px);
display: flex; justify-content: center; }
:where([data-page~="store-preview"]) .pv-bingkai { width: 100%; max-width: 100%; height: calc(100vh - 260px); min-height: 460px;
border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
transition: max-width .25s ease; }
:where([data-page~="store-preview"]) .pv-panggung[data-lebar="tablet"] .pv-bingkai { max-width: 834px; }
:where([data-page~="store-preview"]) .pv-panggung[data-lebar="ponsel"] .pv-bingkai { max-width: 414px; }
:where([data-page~="store-preview"]) .pv-catatan { padding: .7rem clamp(12px, 2vw, 20px) 1.4rem; font-size: var(--fs-sm); color: var(--ink-3); }
@media (max-width: 575.98px) { :where([data-page~="store-preview"]) .pv-alat { margin-left: 0; } }
/* ==== Page: apps/store/templates/store/public_keranjang.html ==== */
:where([data-page~="store-keranjang"]) .kj-item { display: flex; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); }
:where([data-page~="store-keranjang"]) .kj-item:last-child { border-bottom: 0; }
:where([data-page~="store-keranjang"]) .kj-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--sunken); flex: none; }
:where([data-page~="store-keranjang"]) .kj-nama { font-weight: 600; color: var(--ink); text-decoration: none; }
:where([data-page~="store-keranjang"]) .kj-qty { display: inline-flex; align-items: center; gap: .35rem; }
:where([data-page~="store-keranjang"]) .kj-qty button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); line-height: 1; }
:where([data-page~="store-keranjang"]) .kj-kartu { border: 1px solid var(--line); border-radius: 18px; background: var(--paper); padding: 1.4rem; }
@media (max-width: 575.98px) { :where([data-page~="store-keranjang"]) .kj-item { flex-wrap: wrap; } :where([data-page~="store-keranjang"]) .kj-thumb { width: 52px; height: 52px; } }
/* ==== Page: apps/store/templates/store/public_ketentuan.html ==== */
:where([data-page~="store-ketentuan"]) .kp-isi { max-width: 52rem; }
:where([data-page~="store-ketentuan"]) .kp-isi h2 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .8rem; }
:where([data-page~="store-ketentuan"]) .kp-isi h3 { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 .5rem; }
:where([data-page~="store-ketentuan"]) .kp-isi p, :where([data-page~="store-ketentuan"]) .kp-isi li { color: var(--ink-2); line-height: 1.7; }
:where([data-page~="store-ketentuan"]) .kp-nav { position: sticky; top: calc(var(--tinggi-navbar, 72px) + 20px); }
:where([data-page~="store-ketentuan"]) .kp-nav a { display: block; padding: .45rem .8rem; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: .92rem; }
:where([data-page~="store-ketentuan"]) .kp-nav a:hover { background: var(--sunken); color: var(--ink); }
/* ==== Page: apps/store/templates/store/public_product_detail.html ==== */
:where([data-page~="store-product-detail"]) .product-hero { padding-top: 140px; background-color: #fff; }
/* One padding value (--img-pad) on all four sides of the image box. */
:where([data-page~="store-product-detail"]) .product-img-box {
--img-pad: clamp(14px, 3.2vw, 24px);
padding: var(--img-pad);
overflow: hidden;
background: var(--sunken);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
}
/* min-height sits on the placeholder icon, not the box: on the box, shorter
images would get uneven vertical spacing. */
:where([data-page~="store-product-detail"]) .product-img-box > i.fas { min-height: 220px; display: grid; place-items: center; }
:where([data-page~="store-product-detail"]) .product-img-box img {
width: 100%; max-height: 550px; object-fit: contain;
border-radius: var(--r-sm);
}
:where([data-page~="store-product-detail"]) .price-display { font-size: 2.5rem; font-weight: 800; color: var(--primary); letter-spacing: -0.02em; }
:where([data-page~="store-product-detail"]) .btn-buy {
background: var(--dark); color: #fff; border: none;
border-radius: var(--r-md); padding: 1rem 2.5rem; font-weight: 700; transition: all 0.4s;
}
:where([data-page~="store-product-detail"]) .btn-buy:hover { background: var(--primary); transform: translateY(-3px); box-shadow: 0 15px 30px -10px rgba(var(--primary-rgb), 0.5); }
:where([data-page~="store-product-detail"]) .product-body { font-size: 1.15rem; line-height: 1.9; color: #475569; }
:where([data-page~="store-product-detail"]) .product-body h2, :where([data-page~="store-product-detail"]) .product-body h3 { color: var(--dark); font-weight: 700; margin-top: 2rem; }
:where([data-page~="store-product-detail"]) .gallery-thumb { transition: all 0.3s; border: 2px solid transparent !important; }
:where([data-page~="store-product-detail"]) .gallery-thumb.active { border-color: var(--primary) !important; }
/* Related Products */
/* ── Fullscreen gallery ── */
:where([data-page~="store-product-detail"]) .product-img-box { position: relative; }
/* Bottom-left, not bottom-right: product watermarks sit bottom-right. */
:where([data-page~="store-product-detail"]) .zoom-hint {
position: absolute; left: .75rem; bottom: .75rem; z-index: 2;
display: inline-flex; align-items: center; gap: .4rem;
background: rgba(15, 23, 42, .72); color: #fff; border: 0;
border-radius: 999px; padding: .45rem .85rem; font-size: .78rem; font-weight: 600;
cursor: pointer; backdrop-filter: blur(4px); transition: background .2s;
}
:where([data-page~="store-product-detail"]) .zoom-hint:hover { background: rgba(15, 23, 42, .9); }
:where([data-page~="store-product-detail"]) #main-product-img { cursor: zoom-in; }
:where([data-page~="store-product-detail"]) .lightbox {
position: fixed; inset: 0; z-index: 2000; background: rgba(8, 11, 18, .95);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
:where([data-page~="store-product-detail"]) .lightbox.open { opacity: 1; pointer-events: auto; }
:where([data-page~="store-product-detail"]) .lightbox img {
max-width: 92vw; max-height: 86vh; object-fit: contain;
border-radius: .5rem; box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
:where([data-page~="store-product-detail"]) .lb-btn {
position: absolute; background: rgba(255, 255, 255, .1); color: #fff; border: 0;
width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1rem;
display: inline-flex; align-items: center; justify-content: center; transition: background .2s;
}
:where([data-page~="store-product-detail"]) .lb-btn:hover { background: rgba(255, 255, 255, .22); }
:where([data-page~="store-product-detail"]) .lb-prev { left: max(1rem, 2vw); } :where([data-page~="store-product-detail"]) .lb-next { right: max(1rem, 2vw); }
:where([data-page~="store-product-detail"]) .lb-close { top: 1rem; right: max(1rem, 2vw); }
:where([data-page~="store-product-detail"]) .lb-full { top: 1rem; right: calc(max(1rem, 2vw) + 58px); }
:where([data-page~="store-product-detail"]) .lb-count {
position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
color: rgba(255, 255, 255, .8); font-size: .8rem; font-weight: 600;
background: rgba(255, 255, 255, .1); border-radius: 999px; padding: .3rem .8rem;
}
:where([data-page~="store-product-detail"]) .lightbox:fullscreen { background: #080b12; }
@media (max-width: 575.98px) {
:where([data-page~="store-product-detail"]) .lb-prev, :where([data-page~="store-product-detail"]) .lb-next { width: 40px; height: 40px; }
:where([data-page~="store-product-detail"]) .lightbox img { max-width: 96vw; }
}
@media (prefers-reduced-motion: reduce) { :where([data-page~="store-product-detail"]) .lightbox { transition: none; } }
/* ── Product layout ──
Two equal columns on top, then gallery and description at full width. */
:where([data-page~="store-product-detail"]) .produk-nama {
font-family: var(--font-display);
font-size: clamp(1.65rem, 3.1vw, 2.35rem) !important;
font-weight: 600 !important; line-height: 1.18 !important;
letter-spacing: -.03em; color: var(--ink) !important;
}
/* Price is sized below the product name. */
:where([data-page~="store-product-detail"]) .price-display {
font-size: clamp(1.3rem, 2vw, 1.55rem) !important;
font-weight: 700 !important;
}
:where([data-page~="store-product-detail"]) .product-img-box img { max-height: 420px !important; }
/* Thumbnail strip: one scrolling row so the main image, thumbnails and the start
of the description stay visible together. */
:where([data-page~="store-product-detail"]) .produk-galeri { margin-top: clamp(20px, 3vw, 34px); position: relative; }
:where([data-page~="store-product-detail"]) .produk-korsel { position: relative; }
:where([data-page~="store-product-detail"]) .produk-galeri .gallery-thumbs {
display: flex !important; flex-wrap: nowrap !important;
gap: 14px !important; padding: 2px !important;
overflow-x: auto !important; overflow-y: hidden !important;
scroll-snap-type: x mandatory; scroll-behavior: smooth;
scrollbar-width: none; -ms-overflow-style: none;
}
:where([data-page~="store-product-detail"]) .produk-galeri .gallery-thumbs::-webkit-scrollbar { display: none; }
:where([data-page~="store-product-detail"]) .produk-galeri .gallery-thumb {
flex: 0 0 clamp(190px, 24%, 250px) !important;
width: auto !important; height: auto !important; aspect-ratio: 4 / 3;
border-radius: 11px !important; border: 1px solid var(--line) !important;
transition: border-color .18s ease;
scroll-snap-align: start;
}
:where([data-page~="store-product-detail"]) .produk-galeri .gallery-thumb:hover { border-color: var(--primary) !important; }
:where([data-page~="store-product-detail"]) .produk-galeri .gallery-thumb.active {
border-color: var(--primary) !important;
box-shadow: 0 0 0 2px var(--primary);
}
/* Scroll buttons are hidden when all thumbnails fit. */
:where([data-page~="store-product-detail"]) .korsel-tombol {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 38px; height: 38px; border-radius: 50%;
display: none; align-items: center; justify-content: center;
border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
box-shadow: 0 6px 18px -8px rgba(16, 21, 31, .45);
transition: color .18s ease, border-color .18s ease, opacity .18s ease;
}
:where([data-page~="store-product-detail"]) .produk-korsel.bisa-geser .korsel-tombol { display: flex; }
:where([data-page~="store-product-detail"]) .korsel-tombol:hover { color: var(--primary); border-color: var(--primary); }
:where([data-page~="store-product-detail"]) .korsel-tombol[disabled] { opacity: .35; pointer-events: none; }
:where([data-page~="store-product-detail"]) .korsel-tombol.mundur { left: -14px; }
:where([data-page~="store-product-detail"]) .korsel-tombol.maju { right: -14px; }
@media (max-width: 575.98px) {
/* Swipe is enough on phones; buttons would cover the images. */
:where([data-page~="store-product-detail"]) .produk-korsel.bisa-geser .korsel-tombol { display: none; }
:where([data-page~="store-product-detail"]) .produk-galeri .gallery-thumb { flex-basis: 58% !important; }
}
:where([data-page~="store-product-detail"]) .product-body { font-size: 1rem !important; line-height: 1.8 !important; color: var(--ink-2) !important; }
/* Full reading width on product pages: descriptions sit next to
column-wide spec tables. */
:where([data-page~="store-product-detail"]) .product-body > p, :where([data-page~="store-product-detail"]) .product-body > ul, :where([data-page~="store-product-detail"]) .product-body > ol { max-width: none; }
/* White background: the image box and tab panel sit on the --sunken page body
and need their own surface to read as cards. */
:where([data-page~="store-product-detail"]) .product-img-box { background: var(--paper) !important; }
:where([data-page~="store-product-detail"]) .produk-tab {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(14px, 2vw, 22px) clamp(16px, 2.4vw, 28px) clamp(20px, 3vw, 30px);
}
:where([data-page~="store-product-detail"]) .produk-tab .pt-bar { margin-left: calc(-1 * clamp(16px, 2.4vw, 28px));
margin-right: calc(-1 * clamp(16px, 2.4vw, 28px));
padding-left: clamp(16px, 2.4vw, 28px);
padding-right: clamp(16px, 2.4vw, 28px); }
/* ── Detail tabs ── */
:where([data-page~="store-product-detail"]) .produk-tab > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
:where([data-page~="store-product-detail"]) .pt-bar {
display: flex; gap: .25rem; flex-wrap: nowrap; overflow-x: auto;
border-bottom: 1px solid var(--line); margin-bottom: clamp(18px, 2.5vw, 26px);
scrollbar-width: none;
}
:where([data-page~="store-product-detail"]) .pt-bar::-webkit-scrollbar { display: none; }
:where([data-page~="store-product-detail"]) .pt-bar label {
flex: 0 0 auto; cursor: pointer; white-space: nowrap;
padding: .7rem 1.05rem; margin-bottom: -1px;
border-bottom: 2px solid transparent;
font-size: .92rem; font-weight: 600; color: var(--ink-3);
transition: color .18s ease, border-color .18s ease;
}
:where([data-page~="store-product-detail"]) .pt-bar label:hover { color: var(--ink); }
:where([data-page~="store-product-detail"]) .produk-tab:has(> input:focus-visible) .pt-bar label, :where([data-page~="store-product-detail"]) .pt-bar label:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
:where([data-page~="store-product-detail"]) .pt-panel { display: none; }
:where([data-page~="store-product-detail"]) #pt-1:checked ~ .pt-bar label[for="pt-1"], :where([data-page~="store-product-detail"]) #pt-2:checked ~ .pt-bar label[for="pt-2"], :where([data-page~="store-product-detail"]) #pt-3:checked ~ .pt-bar label[for="pt-3"], :where([data-page~="store-product-detail"]) #pt-4:checked ~ .pt-bar label[for="pt-4"] { color: var(--primary); border-bottom-color: var(--primary); }
:where([data-page~="store-product-detail"]) #pt-1:checked ~ .pt-panel[data-pt="1"], :where([data-page~="store-product-detail"]) #pt-2:checked ~ .pt-panel[data-pt="2"], :where([data-page~="store-product-detail"]) #pt-3:checked ~ .pt-panel[data-pt="3"], :where([data-page~="store-product-detail"]) #pt-4:checked ~ .pt-panel[data-pt="4"] { display: block; }
:where([data-page~="store-product-detail"]) .pt-rinci { display: grid; gap: 1px; margin: 0; background: var(--line);
border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
:where([data-page~="store-product-detail"]) .pt-rinci > div {
display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
gap: 0 1.25rem; background: var(--paper); padding: .8rem 1rem;
}
@media (max-width: 575.98px) { :where([data-page~="store-product-detail"]) .pt-rinci > div { grid-template-columns: 1fr; gap: .2rem; } }
:where([data-page~="store-product-detail"]) .pt-rinci dt { margin: 0; font-size: .82rem; font-weight: 600; color: var(--ink-3); }
:where([data-page~="store-product-detail"]) .pt-rinci dd { margin: 0; font-size: .92rem; color: var(--ink); min-width: 0; }
/* Once wrapped on phones, the second row would stop at 38px next to the 56px
buy button. min-height aligns them without affecting wide screens. */
:where([data-page~="store-product-detail"]) .produk-aksi .btn { white-space: nowrap; min-height: 56px; }
@media (max-width: 575.98px) {
:where([data-page~="store-product-detail"]) .produk-aksi { flex-wrap: wrap; }
:where([data-page~="store-product-detail"]) .produk-aksi > .btn-add-to-cart, :where([data-page~="store-product-detail"]) .produk-aksi > #main-buy-btn { flex: 1 0 100%; }
:where([data-page~="store-product-detail"]) .produk-aksi > .btn-outline-primary { flex: 1 1 auto; }
}
:where([data-page~="store-product-detail"]) .harga-mulai { display: block; font-size: .78rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .05em;
color: var(--ink-3); margin-bottom: .1rem; }
:where([data-page~="store-product-detail"]) .pt-catatan { margin: .9rem 0 0; font-size: .84rem; color: var(--ink-3); }
:where([data-page~="store-product-detail"]) .pt-poin { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
:where([data-page~="store-product-detail"]) .pt-poin li { position: relative; padding-left: 1.6rem; font-size: .94rem;
color: var(--ink-2); line-height: 1.55; }
:where([data-page~="store-product-detail"]) .pt-poin li::before { position: absolute; left: 0; top: .1rem;
font-family: "Font Awesome 6 Free"; font-weight: 900;
font-size: .78rem; content: ""; color: var(--primary); }
:where([data-page~="store-product-detail"]) .pt-poin.minus li::before { content: ""; color: var(--ink-3); }
:where([data-page~="store-product-detail"]) .pt-subjudul { margin: 1.4rem 0 .7rem; font-size: .82rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
color: var(--ink-3); }
:where([data-page~="store-product-detail"]) .pt-berkas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
:where([data-page~="store-product-detail"]) .pt-berkas li {
display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem;
border: 1px solid var(--line); border-radius: var(--r-md);
background: var(--paper); padding: .75rem 1rem;
}
:where([data-page~="store-product-detail"]) .pt-berkas code {
font: 600 .85rem var(--font-mono); color: var(--ink);
background: var(--sunken); border-radius: var(--r-xs); padding: .15rem .45rem;
}
:where([data-page~="store-product-detail"]) .pt-berkas span { font-size: .88rem; color: var(--ink-2); flex: 1; min-width: 12rem; }
/* The buy button uses the brand color like other primary actions. */
:where([data-page~="store-product-detail"]) .btn-buy, :where([data-page~="store-product-detail"]) .btn-add-to-cart {
background: var(--primary) !important; border-color: var(--primary) !important;
color: var(--accent-ink) !important; box-shadow: none !important;
}
:where([data-page~="store-product-detail"]) .btn-buy:hover, :where([data-page~="store-product-detail"]) .btn-add-to-cart:hover {
background: color-mix(in srgb, var(--primary) 86%, #000) !important;
}
/* Product page: gradient gallery stage with arrows, thumbnail row, info column
(badge, name, price, pills, actions, 4 highlights), four-item info strip,
then detail tabs in a white card. */
:where([data-page~="store-product-detail"]) .product-hero {
padding: clamp(75px, 5vw, 50px) 0 clamp(40px, 6vw, 72px) !important;
background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, #ffffff) 0, #ffffff 640px) !important;
}
:where([data-page~="store-product-detail"]) .pd-remah {
display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
margin: 1.1rem 0 clamp(18px, 2.4vw, 28px); font-size: .86rem; color: var(--ink-3);
}
:where([data-page~="store-product-detail"]) .pd-remah a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
:where([data-page~="store-product-detail"]) .pd-remah a:hover { color: var(--primary); }
:where([data-page~="store-product-detail"]) .pd-remah .pd-rumah { font-size: .95rem; color: var(--ink-2); margin-right: .15rem; }
:where([data-page~="store-product-detail"]) .pd-remah span { color: var(--ink-3); opacity: .7; }
:where([data-page~="store-product-detail"]) .pd-remah b { color: var(--ink); font-weight: 600; }
:where([data-page~="store-product-detail"]) .pd-panggung { position: relative; }
:where([data-page~="store-product-detail"]) .pd-panggung .product-img-box {
--img-pad: clamp(16px, 3.4vw, 40px);
border: 0 !important; border-radius: 22px !important; box-shadow: none !important;
background: linear-gradient(135deg,
color-mix(in srgb, var(--primary) 9%, #ffffff) 0%,
color-mix(in srgb, var(--primary) 26%, #ffffff) 100%) !important;
min-height: clamp(240px, 32vw, 400px);
}
:where([data-page~="store-product-detail"]) .pd-panggung .product-img-box img {
max-height: 380px !important; border-radius: 12px !important;
box-shadow: 0 22px 44px -22px rgba(16, 21, 31, .45);
background: #fff;
}
:where([data-page~="store-product-detail"]) .pd-panah {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 44px; height: 44px; border-radius: 50%; border: 0;
display: grid; place-items: center; background: #fff; color: var(--ink);
box-shadow: 0 8px 22px -8px rgba(16, 21, 31, .35); transition: color .15s, transform .15s;
}
:where([data-page~="store-product-detail"]) .pd-panah:hover { color: var(--primary); transform: translateY(-50%) scale(1.06); }
:where([data-page~="store-product-detail"]) .pd-panah.kiri { left: -18px; }
:where([data-page~="store-product-detail"]) .pd-panah.kanan { right: 18px; }
@media (max-width: 991.98px) { :where([data-page~="store-product-detail"]) .pd-panah.kiri { left: 10px; } :where([data-page~="store-product-detail"]) .pd-panah.kanan { right: 10px; } :where([data-page~="store-product-detail"]) .pd-panah { width: 38px; height: 38px; } }
:where([data-page~="store-product-detail"]) .pd-thumbs {
display: flex; gap: 12px; margin-top: 16px; padding: 3px;
overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
:where([data-page~="store-product-detail"]) .pd-thumbs::-webkit-scrollbar { display: none; }
:where([data-page~="store-product-detail"]) .pd-thumbs .gallery-thumb {
flex: 0 0 clamp(96px, 11vw, 126px); aspect-ratio: 3 / 2; padding: 0;
border-radius: 12px; overflow: hidden; background: #fff;
border: 1px solid var(--line) !important; scroll-snap-align: start; cursor: pointer;
transition: border-color .15s, box-shadow .15s;
}
:where([data-page~="store-product-detail"]) .pd-thumbs .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
:where([data-page~="store-product-detail"]) .pd-thumbs .gallery-thumb:hover { border-color: var(--primary) !important; }
:where([data-page~="store-product-detail"]) .pd-thumbs .gallery-thumb.active { border-color: var(--primary) !important; box-shadow: 0 0 0 2px var(--primary); }
:where([data-page~="store-product-detail"]) .pd-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
:where([data-page~="store-product-detail"]) .pd-meta .badge-type {
background: var(--accent-soft) !important; color: var(--primary) !important;
border: 0 !important; border-radius: var(--r-pill) !important;
padding: .4rem .85rem !important; font-size: .8rem !important; font-weight: 600 !important;
text-transform: none !important; letter-spacing: 0 !important;
}
:where([data-page~="store-product-detail"]) .pd-dilihat { color: var(--ink-2); font-size: .88rem; display: inline-flex; align-items: center; gap: .4rem; }
:where([data-page~="store-product-detail"]) .product-hero .produk-nama {
font-size: clamp(1.8rem, 2.6vw, 2.45rem) !important; font-weight: 700 !important;
line-height: 1.15 !important; letter-spacing: -.035em; margin: 0 0 .9rem;
}
:where([data-page~="store-product-detail"]) .product-hero .price-display {
font-family: var(--font-display); font-size: clamp(1.6rem, 2.2vw, 2rem) !important;
font-weight: 700 !important; color: var(--primary); letter-spacing: -.02em; margin-bottom: 1.1rem;
}
:where([data-page~="store-product-detail"]) .pd-pil {
display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem;
padding: .65rem 1.05rem; border-radius: 12px; font-size: .9rem; font-weight: 500;
}
:where([data-page~="store-product-detail"]) .pd-pil.is-baik { background: #e8f6ee; color: #1d6b45; }
:where([data-page~="store-product-detail"]) .pd-pil.is-info { background: var(--accent-soft); color: var(--primary); }
:where([data-page~="store-product-detail"]) .pd-pil.is-habis { background: #fdecec; color: #a02c2c; }
:where([data-page~="store-product-detail"]) .pd-aksi { display: flex; gap: 12px; margin-bottom: 1.6rem; }
:where([data-page~="store-product-detail"]) .pd-aksi .btn { min-height: 56px; border-radius: 12px; font-weight: 600; font-size: .98rem;
display: inline-flex; align-items: center; justify-content: center; }
:where([data-page~="store-product-detail"]) .pd-aksi .btn { white-space: nowrap; }
:where([data-page~="store-product-detail"]) .pd-aksi .pd-beli { flex: 1 1 0; min-width: 0; padding: 0 1rem; }
:where([data-page~="store-product-detail"]) .pd-aksi .pd-pratinjau { flex: 0 0 auto; padding: 0 1.15rem; border-width: 1.5px; background: #fff; }
/* The white background overrides .btn-outline-primary's hover background while
the text still turns white; restore the hover background. */
:where([data-page~="store-product-detail"]) .pd-aksi .pd-pratinjau:hover, :where([data-page~="store-product-detail"]) .pd-aksi .pd-pratinjau:focus-visible, :where([data-page~="store-product-detail"]) .pd-aksi .pd-pratinjau:active {
background: var(--primary); border-color: var(--primary); color: var(--accent-ink);
}
:where([data-page~="store-product-detail"]) .pd-aksi .pd-bagi { flex: 0 0 56px; width: 56px; padding: 0; background: #fff; border-color: var(--line); color: var(--ink-2); }
:where([data-page~="store-product-detail"]) .pd-aksi .pd-bagi:hover { color: var(--primary); border-color: var(--primary); background: #fff; }
:where([data-page~="store-product-detail"]) .pd-aksi .pd-beli > span { overflow: hidden; text-overflow: ellipsis; }
/* The info column fits three buttons in a row from about 1400px;
below that the buy button takes a full row. */
@media (max-width: 1399.98px) {
:where([data-page~="store-product-detail"]) .pd-aksi { flex-wrap: wrap; }
:where([data-page~="store-product-detail"]) .pd-aksi .pd-beli { flex: 1 0 100%; }
:where([data-page~="store-product-detail"]) .pd-aksi .pd-pratinjau { flex: 1 1 auto; }
}
:where([data-page~="store-product-detail"]) .pd-sorotan {
list-style: none; margin: 0; padding: 1.2rem 0 0; border-top: 1px solid var(--line);
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
:where([data-page~="store-product-detail"]) .pd-sorotan li { padding: 0 .75rem; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
:where([data-page~="store-product-detail"]) .pd-sorotan li:first-child { padding-left: 0; border-left: 0; }
:where([data-page~="store-product-detail"]) .pd-sorotan i { font-size: 1.15rem; color: var(--primary); margin-bottom: .35rem; }
:where([data-page~="store-product-detail"]) .pd-sorotan b { font-size: .76rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
:where([data-page~="store-product-detail"]) .pd-sorotan span { font-size: .7rem; color: var(--ink-3); line-height: 1.4; }
/* The info column is narrow at lg (~400px): four columns are too tight. */
@media (min-width: 992px) and (max-width: 1199.98px) {
:where([data-page~="store-product-detail"]) .pd-sorotan { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
:where([data-page~="store-product-detail"]) .pd-sorotan li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 575.98px) {
:where([data-page~="store-product-detail"]) .pd-sorotan { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.1rem; }
:where([data-page~="store-product-detail"]) .pd-sorotan li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
:where([data-page~="store-product-detail"]) .pd-strip {
display: grid; grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
background: #fff; border: 1px solid var(--line); border-radius: 18px;
padding: clamp(16px, 2vw, 22px) clamp(16px, 2.2vw, 26px);
box-shadow: 0 14px 34px -26px rgba(16, 21, 31, .35);
margin-top: clamp(4px, 1vw, 10px);
}
:where([data-page~="store-product-detail"]) .pd-strip-butir {
display: flex; align-items: center; gap: .9rem; min-width: 0;
padding: 0 clamp(12px, 1.8vw, 24px); border-left: 1px solid var(--line);
}
:where([data-page~="store-product-detail"]) .pd-strip-butir:first-child { padding-left: 0; border-left: 0; }
:where([data-page~="store-product-detail"]) .pd-strip-butir > i { font-size: 1.45rem; color: var(--primary); flex-shrink: 0; width: 1.6rem; text-align: center; }
:where([data-page~="store-product-detail"]) .pd-strip-butir b { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); }
:where([data-page~="store-product-detail"]) .pd-strip-butir span { display: block; font-size: .8rem; color: var(--ink-3); line-height: 1.45; }
:where([data-page~="store-product-detail"]) .pd-strip-ubin {
width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; overflow: hidden;
display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 1.3rem;
}
:where([data-page~="store-product-detail"]) .pd-strip-ubin img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991.98px) {
:where([data-page~="store-product-detail"]) .pd-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.1rem; }
:where([data-page~="store-product-detail"]) .pd-strip-butir:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 575.98px) {
:where([data-page~="store-product-detail"]) .pd-strip { grid-template-columns: 1fr; }
:where([data-page~="store-product-detail"]) .pd-strip-butir { padding-left: 0; border-left: 0; }
}
/* Detail tabs: solid white card with a soft shadow. */
:where([data-page~="store-product-detail"]) .produk-tab {
background: #ffffff !important; border: 1px solid var(--line);
box-shadow: 0 18px 40px -28px rgba(16, 21, 31, .32), 0 2px 8px -4px rgba(16, 21, 31, .06);
margin-top: clamp(8px, 1.5vw, 16px);
}
/* Share menu */
:where([data-page~="store-product-detail"]) .pd-bagi-wrap { position: relative; flex: 0 0 56px; }
:where([data-page~="store-product-detail"]) .pd-aksi .pd-bagi-wrap .pd-bagi { width: 56px; }
:where([data-page~="store-product-detail"]) .pd-bagi.aktif { color: var(--primary) !important; border-color: var(--primary) !important; }
:where([data-page~="store-product-detail"]) .pd-bagi-menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 210px;
background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .4rem;
box-shadow: 0 18px 40px -16px rgba(16, 21, 31, .35);
}
:where([data-page~="store-product-detail"]) .pd-bagi-menu[hidden] { display: none; }
:where([data-page~="store-product-detail"]) .pd-bagi-menu > a, :where([data-page~="store-product-detail"]) .pd-bagi-menu > button {
display: flex; align-items: center; gap: .7rem; width: 100%;
padding: .55rem .7rem; border: 0; background: transparent; border-radius: 9px;
font-size: .88rem; font-weight: 500; color: var(--ink-2); text-decoration: none; text-align: left;
}
:where([data-page~="store-product-detail"]) .pd-bagi-menu > a:hover, :where([data-page~="store-product-detail"]) .pd-bagi-menu > button:hover { background: var(--sunken); color: var(--ink); }
:where([data-page~="store-product-detail"]) .pd-bagi-menu i { width: 1.1rem; text-align: center; color: var(--ink-3); }
:where([data-page~="store-product-detail"]) .pd-bagi-menu .fa-whatsapp { color: #1fa855; } :where([data-page~="store-product-detail"]) .pd-bagi-menu .fa-telegram { color: #229ed9; }
:where([data-page~="store-product-detail"]) .pd-bagi-menu .fa-facebook { color: #1877f2; } :where([data-page~="store-product-detail"]) .pd-bagi-menu .fa-linkedin { color: #0a66c2; }
:where([data-page~="store-product-detail"]) .pd-bagi-menu .berhasil, :where([data-page~="store-product-detail"]) .pd-bagi-menu .berhasil i { color: #1d6b45 !important; }
/* ==== Page: apps/store/templates/store/public_product_list.html ==== */
:where([data-page~="store-product-list"]) .store-header {
background: linear-gradient(135deg, #060b1a 0%, #1e1b4b 100%);
padding: 100px 0 80px;
position: relative; overflow: hidden;
}
:where([data-page~="store-product-list"]) .store-header::before {
content: "";
position: absolute; inset: 0;
background-image: linear-gradient(rgba(79,70,229,.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(79,70,229,.07) 1px, transparent 1px);
background-size: 48px 48px;
}
:where([data-page~="store-product-list"]) .store-header .glow {
position: absolute;
background: radial-gradient(circle, rgba(79,70,229,.3) 0%, transparent 65%);
width: 500px; height: 500px;
top: -120px; right: -120px; z-index: 0;
}
:where([data-page~="store-product-list"]) .store-header .container { position: relative; z-index: 1; }
:where([data-page~="store-product-list"]) .store-header h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; color: #fff; letter-spacing: -.02em; }
:where([data-page~="store-product-list"]) .store-header p { color: #94a3b8; font-size: 1.05rem; max-width: 520px; }
/* Category thumbnail hero */
:where([data-page~="store-product-list"]) .store-header.has-thumb { padding: 120px 0 90px; }
:where([data-page~="store-product-list"]) .store-header .hero-thumb-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: brightness(0.2) saturate(0.6);
}
:where([data-page~="store-product-list"]) .store-header .hero-thumb-img {
width: 200px; height: 200px;
object-fit: cover; border-radius: 1.5rem;
border: 4px solid rgba(255,255,255,.15);
box-shadow: 0 20px 60px rgba(0,0,0,.5);
flex-shrink: 0;
}
:where([data-page~="store-product-list"]) .cat-pill { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; padding: .35rem 1rem; border-radius: 2rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; margin-bottom: 1.25rem; backdrop-filter: blur(4px); }
:where([data-page~="store-product-list"]) .cat-pill:hover { background: rgba(255,255,255,.22); color: #fff; }
/* Product card styles live in the base_public section
(markup: templates/elements/product_card.html). */
/* Public token alignment: light, left-aligned page head separated by a border;
decorative gradients, dot grids and glows are hidden. */
:where([data-page~="store-product-list"]) .page-hero {
background: var(--sunken) !important;
border-bottom: 1px solid var(--line) !important;
padding: 116px 0 44px !important;
}
:where([data-page~="store-product-list"]) .page-hero::before, :where([data-page~="store-product-list"]) .page-hero .glow, :where([data-page~="store-product-list"]) .page-hero .hero-thumb-bg { display: none !important; }
:where([data-page~="store-product-list"]) .page-hero h1 {
font-family: var(--font-display) !important;
color: var(--ink) !important;
font-weight: 600 !important;
font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
letter-spacing: -.03em !important;
}
:where([data-page~="store-product-list"]) .page-hero p { color: var(--ink-2) !important; }
:where([data-page~="store-product-list"]) .page-hero .btn-outline-secondary {
color: var(--ink-2) !important; border-color: var(--line) !important;
}
:where([data-page~="store-product-list"]) .page-hero .btn-outline-secondary:hover { background: var(--paper) !important; color: var(--ink) !important; }
:where([data-page~="store-product-list"]) .page-hero .cat-pill, :where([data-page~="store-product-list"]) .page-hero .badge {
background: var(--accent-soft) !important; color: var(--primary) !important;
border: 0 !important;
}
:where([data-page~="store-product-list"]) .page-hero .hero-thumb-img {
border: 1px solid var(--line) !important; box-shadow: none !important;
}
/* Page head matches the home hero: light, left-aligned, Archivo title,
closed by a thin row of figures. No type pill or floating back button. */
/* The .page-head design lives in the base_public section. */
@media (max-width: 575.98px) {
:where([data-page~="store-product-list"]) .page-head .ph-meta div { padding-right: 16px; margin-right: 16px; }
}
/* ── Compact store head ──
One row (title + intro left, figures right) so products appear above the fold.
"html body" matches the !important padding in base_public. */
/* Top: fixed navbar height (~67px) + 30px gap. */
html body:where([data-page~="store-product-list"]) .page-head.ph-ringkas { padding: 98px 0 24px !important; }
:where([data-page~="store-product-list"]) .page-head.ph-ringkas::after { display: none; }
:where([data-page~="store-product-list"]) .ph-ringkas .ph-grid { display: block; }
:where([data-page~="store-product-list"]) .ph-ringkas .ph-grid > div {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: end; gap: .25rem 2.5rem;
}
:where([data-page~="store-product-list"]) .ph-ringkas .ph-back { grid-column: 1 / -1; margin-bottom: 4px !important; }
:where([data-page~="store-product-list"]) .ph-ringkas .ph-badge { display: none; }
:where([data-page~="store-product-list"]) .ph-ringkas h1 { font-size: clamp(1.55rem, 1.4rem + .6vw, 2rem) !important; }
:where([data-page~="store-product-list"]) .ph-ringkas .lead-sub { margin-top: 6px !important; font-size: .95rem !important; max-width: 46rem; }
:where([data-page~="store-product-list"]) .ph-ringkas .ph-judul { align-items: center; }
:where([data-page~="store-product-list"]) .ph-ringkas .ph-thumb { width: 56px !important; height: 56px !important; border-radius: 12px; }
:where([data-page~="store-product-list"]) .ph-ringkas .ph-meta { margin: 0 !important; padding: 0 0 2px !important; border: 0 !important; flex-wrap: nowrap; }
:where([data-page~="store-product-list"]) .ph-ringkas .ph-meta b { font-size: 1.3rem !important; }
@media (max-width: 767.98px) {
html body:where([data-page~="store-product-list"]) .page-head.ph-ringkas { padding: 84px 0 18px !important; }
:where([data-page~="store-product-list"]) .ph-ringkas .ph-grid > div { grid-template-columns: 1fr; }
/* Product count is already shown above the grid; hide it on phones. */
:where([data-page~="store-product-list"]) .ph-ringkas .ph-meta { display: none; }
:where([data-page~="store-product-list"]) .ph-ringkas .lead-sub {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
font-size: .9rem !important;
}
}
/* Storefront: inline filter bar + filter sidebar */
:where([data-page~="store-product-list"]) .toko-wrap { padding-top: clamp(20px, 3vw, 32px); padding-bottom: clamp(40px, 6vw, 72px); }
:where([data-page~="store-product-list"]) .toko-saring {
display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
padding: .6rem; margin-bottom: clamp(18px, 2.5vw, 28px);
box-shadow: 0 10px 30px -22px rgba(16, 21, 31, .35);
}
:where([data-page~="store-product-list"]) .toko-cari { flex: 1 1 260px; position: relative; min-width: 0; }
:where([data-page~="store-product-list"]) .toko-cari i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: .9rem; }
:where([data-page~="store-product-list"]) .toko-cari input {
width: 100%; height: 46px; border: 1px solid var(--line); border-radius: var(--r-md);
padding: 0 1rem 0 2.6rem; font-size: .95rem; background: var(--sunken); color: var(--ink); outline: none;
}
:where([data-page~="store-product-list"]) .toko-cari input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
:where([data-page~="store-product-list"]) .toko-saring .form-select { flex: 0 1 210px; height: 46px; border-radius: var(--r-md); border-color: var(--line); font-size: .92rem; }
:where([data-page~="store-product-list"]) .toko-saring .btn { height: 46px; border-radius: var(--r-md); padding: 0 1.4rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 767.98px) {
:where([data-page~="store-product-list"]) .toko-cari { flex-basis: 100%; }
:where([data-page~="store-product-list"]) .toko-saring .form-select { flex: 1 1 40%; }
:where([data-page~="store-product-list"]) .toko-saring .btn { padding: 0 1rem; }
}
:where([data-page~="store-product-list"]) .toko-sidebar { position: sticky; top: 90px; }
@media (max-width: 991.98px) { :where([data-page~="store-product-list"]) .toko-sidebar { position: static; } }
:where([data-page~="store-product-list"]) .toko-panel {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 1rem 1rem .85rem; margin-bottom: 1rem;
}
:where([data-page~="store-product-list"]) .toko-panel-judul {
font: 700 .74rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em;
color: var(--ink-3); margin: 0 0 .75rem;
}
:where([data-page~="store-product-list"]) .toko-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
:where([data-page~="store-product-list"]) .toko-daftar a {
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
padding: .5rem .6rem; border-radius: var(--r-sm); text-decoration: none;
color: var(--ink-2); font-size: .9rem; font-weight: 500;
}
:where([data-page~="store-product-list"]) .toko-daftar a span { display: flex; align-items: center; gap: .6rem; min-width: 0; }
:where([data-page~="store-product-list"]) .toko-daftar a span i { width: 22px; text-align: center; color: var(--ink-3); font-size: .85rem; }
:where([data-page~="store-product-list"]) .toko-daftar a img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
:where([data-page~="store-product-list"]) .toko-daftar a b { font-size: .75rem; font-weight: 600; color: var(--ink-3); background: var(--sunken); border-radius: var(--r-pill); padding: .15rem .5rem; }
:where([data-page~="store-product-list"]) .toko-daftar a:hover { background: var(--sunken); color: var(--ink); }
:where([data-page~="store-product-list"]) .toko-daftar a.aktif { background: var(--accent-soft); color: var(--primary); font-weight: 600; }
:where([data-page~="store-product-list"]) .toko-daftar a.aktif i { color: var(--primary); }
:where([data-page~="store-product-list"]) .toko-daftar a.aktif b { background: var(--primary); color: #fff; }
:where([data-page~="store-product-list"]) .toko-chip { display: flex; flex-wrap: wrap; gap: .4rem; }
:where([data-page~="store-product-list"]) .toko-chip a {
padding: .38rem .8rem; border-radius: var(--r-pill); border: 1px solid var(--line);
font-size: .84rem; font-weight: 500; color: var(--ink-2); text-decoration: none; background: #fff;
}
:where([data-page~="store-product-list"]) .toko-chip a small { color: var(--ink-3); margin-left: .15rem; }
:where([data-page~="store-product-list"]) .toko-chip a:hover { border-color: var(--primary); color: var(--primary); }
:where([data-page~="store-product-list"]) .toko-chip a.aktif { background: var(--primary); border-color: var(--primary); color: #fff; }
:where([data-page~="store-product-list"]) .toko-chip a.aktif small { color: rgba(255, 255, 255, .8); }
:where([data-page~="store-product-list"]) .toko-harga-baris { display: flex; align-items: center; gap: .4rem; }
:where([data-page~="store-product-list"]) .toko-harga-baris .form-control { height: 40px; font-size: .88rem; border-color: var(--line); }
:where([data-page~="store-product-list"]) .toko-harga-baris span { color: var(--ink-3); }
:where([data-page~="store-product-list"]) .toko-unggulan {
display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem;
border-radius: var(--r-lg); text-decoration: none;
background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000));
color: #fff;
}
:where([data-page~="store-product-list"]) .toko-unggulan span { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
:where([data-page~="store-product-list"]) .toko-unggulan b { font-size: .92rem; }
:where([data-page~="store-product-list"]) .toko-unggulan small { opacity: .8; font-size: .78rem; }
:where([data-page~="store-product-list"]) .toko-unggulan:hover { color: #fff; filter: brightness(1.06); }
:where([data-page~="store-product-list"]) .toko-hasil { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
:where([data-page~="store-product-list"]) .toko-hasil > span { font-size: .9rem; color: var(--ink-3); font-weight: 500; }
:where([data-page~="store-product-list"]) .toko-aktif { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
:where([data-page~="store-product-list"]) .toko-aktif a {
display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem;
border-radius: var(--r-pill); background: var(--accent-soft); color: var(--primary);
font-size: .8rem; font-weight: 600; text-decoration: none;
}
:where([data-page~="store-product-list"]) .toko-aktif a i { font-size: .7rem; }
:where([data-page~="store-product-list"]) .toko-aktif a.hapus { background: transparent; color: var(--ink-3); text-decoration: underline; }
:where([data-page~="store-product-list"]) .toko-kosong {
text-align: center; padding: 3.5rem 1rem; border: 1px dashed var(--line);
border-radius: var(--r-lg); background: #fff; color: var(--ink-2);
}
:where([data-page~="store-product-list"]) .toko-kosong i { font-size: 2rem; color: var(--ink-3); opacity: .5; margin-bottom: .75rem; display: block; }
/* ==== Page: templates/403.html ==== */
:where([data-page~="403"]) .error-illustration {
position: relative;
height: 200px;
}
:where([data-page~="403"]) .error-icon-wrapper i {
animation: pulse-danger 2s infinite;
}
@keyframes pulse-danger {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(220, 53, 69, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
@media (max-width: 768px) {
:where([data-page~="403"]) .display-1 { font-size: 6rem !important; }
:where([data-page~="403"]) .error-illustration { height: 160px; }
:where([data-page~="403"]) .error-icon-wrapper i { font-size: 3.5rem !important; }
}
/* Token alignment: colors and type follow the public site. */
body:where([data-page~="403"]) {
--primary: #2957ab; --primary-rgb: 41, 87, 171;
--bs-primary: #2957ab; --bs-primary-rgb: 41, 87, 171;
--bs-link-color: #2957ab; --bs-link-hover-color: #204485;
}
body:where([data-page~="403"]) { font-family: "Public Sans", system-ui, -apple-system, sans-serif; }
:where([data-page~="403"]) h1, :where([data-page~="403"]) h2, :where([data-page~="403"]) h3, :where([data-page~="403"]) h4, :where([data-page~="403"]) .display-1 {
font-family: "Archivo", system-ui, sans-serif;
letter-spacing: -.03em;
}
:where([data-page~="403"]) .btn-primary, :where([data-page~="403"]) .btn-danger {
--bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
--bs-btn-hover-bg: color-mix(in srgb, var(--primary) 86%, #000);
--bs-btn-hover-border-color: color-mix(in srgb, var(--primary) 84%, #000);
--bs-btn-focus-shadow-rgb: var(--primary-rgb);
}
:where([data-page~="403"]) .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary);
--bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); }
/* ==== Page: templates/404.html ==== */
:where([data-page~="404"]) .error-illustration {
position: relative;
height: 200px;
}
:where([data-page~="404"]) .error-icon-wrapper i {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
@media (max-width: 768px) {
:where([data-page~="404"]) .display-1 { font-size: 6rem !important; }
:where([data-page~="404"]) .error-illustration { height: 160px; }
:where([data-page~="404"]) .error-icon-wrapper i { font-size: 3.5rem !important; }
}
/* Token alignment: colors and type follow the public site. */
body:where([data-page~="404"]) {
--primary: #2957ab; --primary-rgb: 41, 87, 171;
--bs-primary: #2957ab; --bs-primary-rgb: 41, 87, 171;
--bs-link-color: #2957ab; --bs-link-hover-color: #204485;
}
body:where([data-page~="404"]) { font-family: "Public Sans", system-ui, -apple-system, sans-serif; }
:where([data-page~="404"]) h1, :where([data-page~="404"]) h2, :where([data-page~="404"]) h3, :where([data-page~="404"]) h4, :where([data-page~="404"]) .display-1 {
font-family: "Archivo", system-ui, sans-serif;
letter-spacing: -.03em;
}
:where([data-page~="404"]) .btn-primary, :where([data-page~="404"]) .btn-danger {
--bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
--bs-btn-hover-bg: color-mix(in srgb, var(--primary) 86%, #000);
--bs-btn-hover-border-color: color-mix(in srgb, var(--primary) 84%, #000);
--bs-btn-focus-shadow-rgb: var(--primary-rgb);
}
:where([data-page~="404"]) .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary);
--bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); }
/* ==== Page: templates/home.html ==== */
/* ═══════════════════════════════════════════════
GLOBAL
═══════════════════════════════════════════════ */
:where([data-page~="home"]) .home-page { overflow-x: hidden; }
/* ═══════════════════════════════════════════════
HERO
═══════════════════════════════════════════════ */
:where([data-page~="home"]) .hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: radial-gradient(130% 120% at 50% -10%, #12183a 0%, #0a0e24 45%, #05060f 100%);
overflow: hidden;
padding: 140px 0 110px;
isolation: isolate;
}
:where([data-page~="home"]) .hero-bg-img {
position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: .10;
-webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
z-index: 0;
}
:where([data-page~="home"]) .hero-spot {
position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
width: 1100px; height: 700px; z-index: 0; pointer-events: none;
background: radial-gradient(ellipse at center, rgba(13,110,253,.35) 0%, rgba(13,110,253,.12) 35%, transparent 70%);
animation: hero-pulse 7s ease-in-out infinite;
}
@keyframes hero-pulse { 0%,100%{opacity:.75} 50%{opacity:1} }
:where([data-page~="home"]) .hero-orb {
position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
filter: blur(70px);
}
:where([data-page~="home"]) .hero-orb-1 {
width: 440px; height: 440px; top: 8%; left: -6%;
background: radial-gradient(circle, rgba(13,110,253,.5), transparent 70%);
animation: orb-a 14s ease-in-out infinite alternate;
}
:where([data-page~="home"]) .hero-orb-2 {
width: 400px; height: 400px; bottom: 2%; right: -4%;
background: radial-gradient(circle, rgba(13,110,253,.35), transparent 70%);
animation: orb-b 16s ease-in-out infinite alternate;
}
@keyframes orb-a { to { transform: translate(60px, 40px) scale(1.1); } }
@keyframes orb-b { to { transform: translate(-50px, -30px) scale(1.08); } }
:where([data-page~="home"]) .hero-dots {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: radial-gradient(rgba(148,163,184,.18) 1px, transparent 1px);
background-size: 34px 34px;
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 45%, #000 0%, transparent 80%);
mask-image: radial-gradient(ellipse 80% 60% at 50% 45%, #000 0%, transparent 80%);
opacity: .5;
}
:where([data-page~="home"]) .hero .container { position: relative; z-index: 2; }
:where([data-page~="home"]) .hero-inner { max-width: 900px; margin: 0 auto; }
:where([data-page~="home"]) .hero-pill {
display: inline-flex; align-items: center; gap: .55rem;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.14);
color: #9ec5fe;
font-size: .74rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
padding: .5rem 1.15rem;
border-radius: 2rem;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
:where([data-page~="home"]) .hero-pill .dot {
width: 7px; height: 7px; background: #34d399; border-radius: 50%;
box-shadow: 0 0 0 3px rgba(52,211,153,.25);
animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
:where([data-page~="home"]) .hero h1 {
font-family: "Space Grotesk", sans-serif;
font-size: clamp(2.6rem, 1.988rem + 2.718vw, 5.25rem);
font-weight: 700; line-height: 1.04;
letter-spacing: -.035em; color: #f8fafc;
margin: 0 auto;
}
:where([data-page~="home"]) .hero h1 .gradient-text {
background: linear-gradient(120deg, #6ea8fe 0%, #6ea8fe 38%, #cfe2ff 72%, #6ea8fe 100%);
background-size: 200% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: hero-sheen 6s linear infinite;
}
@keyframes hero-sheen { to { background-position: 200% center; } }
:where([data-page~="home"]) .hero-desc {
font-size: clamp(1rem, 0.9538rem + 0.2051vw, 1.2rem);
color: #94a3b8; max-width: 600px;
margin: 1.5rem auto 0; line-height: 1.7;
}
:where([data-page~="home"]) .hero-cta {
display: flex; flex-wrap: wrap; gap: 1rem;
justify-content: center; margin-top: 2.5rem;
}
:where([data-page~="home"]) .btn-hero-primary {
display: inline-flex; align-items: center; gap: .5rem;
background: linear-gradient(135deg, #0d6efd, #0a58ca);
color: #fff; border: none;
padding: .9rem 2.3rem; border-radius: 3rem;
font-weight: 700; font-size: .95rem; text-decoration: none;
transition: all .3s; box-shadow: 0 10px 30px rgba(13,110,253,.45);
}
:where([data-page~="home"]) .btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(13,110,253,.55); color: #fff; }
:where([data-page~="home"]) .btn-hero-ghost {
display: inline-flex; align-items: center; gap: .5rem;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.2);
color: #e2e8f0;
padding: .88rem 2rem; border-radius: 3rem;
font-weight: 600; font-size: .95rem; text-decoration: none;
transition: all .3s; backdrop-filter: blur(6px);
}
:where([data-page~="home"]) .btn-hero-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
:where([data-page~="home"]) .hero-proof {
display: inline-flex; align-items: center; flex-wrap: wrap; gap: .75rem;
margin-top: 3rem; padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,.08);
color: #94a3b8; font-size: .9rem;
}
:where([data-page~="home"]) .hero-proof strong { color: #f1f5f9; font-weight: 700; }
:where([data-page~="home"]) .hero-proof .hero-stars { color: #fbbf24; letter-spacing: .12em; font-size: .8rem; }
:where([data-page~="home"]) .hero-scroll {
position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.25);
border-radius: 20px; z-index: 2; display: block;
}
:where([data-page~="home"]) .hero-scroll span {
position: absolute; top: 8px; left: 50%;
width: 4px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.6);
animation: scroll-bob 1.8s ease-in-out infinite;
}
@keyframes scroll-bob {
0% { opacity: 0; transform: translate(-50%, 0); }
40% { opacity: 1; }
80% { opacity: 0; transform: translate(-50%, 14px); }
}
@media (max-width: 767.98px) {
:where([data-page~="home"]) .hero-pill {
font-size: .62rem;
letter-spacing: .12em;
padding: .4rem .9rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 575.98px) {
:where([data-page~="home"]) .hero-scroll { display: none; }
:where([data-page~="home"]) .hero-pill { font-size: .56rem; letter-spacing: .1em; padding: .35rem .8rem; gap: .4rem; }
:where([data-page~="home"]) .hero-pill .dot { width: 6px; height: 6px; }
}
/* ═══════════════════════════════════════════════
STATS
═══════════════════════════════════════════════ */
/* Single source for the stats band design. */
:where([data-page~="home"]) .stats-section {
background: var(--dark);
padding: clamp(18px, 2.2vw, 28px) 0;
position: relative;
}
:where([data-page~="home"]) .stats-inner {
display: flex; flex-wrap: nowrap;
align-items: stretch;
}
:where([data-page~="home"]) .stat-item {
flex: 1 1 0; text-align: center; color: #fff;
padding: .4rem 1rem;
border-right: 1px solid rgba(255, 255, 255, .15);
}
:where([data-page~="home"]) .stat-item:last-child { border-right: none; }
:where([data-page~="home"]) .stat-icon {
font-size: 1rem;
color: rgba(255, 255, 255, .5);
display: block; margin-bottom: .45rem; opacity: .55;
}
:where([data-page~="home"]) .stat-number {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: clamp(1.5rem, 1.362rem + 0.6154vw, 2.1rem);
font-weight: 600; line-height: 1.1; letter-spacing: -.02em;
display: block; white-space: nowrap;
}
:where([data-page~="home"]) .stat-label {
font-size: .72rem;
font-weight: 600; opacity: .75;
text-transform: uppercase; letter-spacing: .1em;
margin-top: .25rem; display: block; white-space: nowrap;
}
@media (max-width: 767.98px) {
:where([data-page~="home"]) .stats-inner { flex-wrap: wrap; }
:where([data-page~="home"]) .stat-item {
flex: 0 0 50%;
padding: 1rem .75rem;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, .15);
}
:where([data-page~="home"]) .stat-item:nth-child(odd) {
border-right: 1px solid rgba(255, 255, 255, .15);
}
:where([data-page~="home"]) .stat-item:nth-last-child(-n/**/+2) {
border-bottom: none;
}
}
/* ═══════════════════════════════════════════════
SECTION COMMONS
═══════════════════════════════════════════════ */
:where([data-page~="home"]) .section-wrap { padding: 6rem 0; }
:where([data-page~="home"]) .section-wrap-sm { padding: 4rem 0; }
:where([data-page~="home"]) .eyebrow {
display: inline-block;
font-size: .75rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: #0d6efd;
background: rgba(13,110,253,.08);
border: 1px solid rgba(13,110,253,.18);
padding: .3rem .85rem; border-radius: 2rem;
margin-bottom: 1rem;
}
:where([data-page~="home"]) .section-title {
font-weight: 800;
font-size: clamp(1.75rem, 1.519rem + 1.026vw, 2.75rem);
color: #0f172a; line-height: 1.15;
letter-spacing: -.02em;
}
:where([data-page~="home"]) .section-sub { color: #64748b; font-size: 1rem; max-width: 540px; line-height: 1.7; }
/* The "Why choose us" subtitle spans the full column instead of 540px. */
:where([data-page~="home"]) .features-bg .section-sub { max-width: none; }
/* wave divider */
:where([data-page~="home"]) .wave-top, :where([data-page~="home"]) .wave-bottom { display: block; width: 100%; line-height: 0; }
/* ═══════════════════════════════════════════════
FEATURES
═══════════════════════════════════════════════ */
:where([data-page~="home"]) .features-bg {
background: #f8fafc;
position: relative; overflow: hidden;
}
:where([data-page~="home"]) .features-bg::before {
content: "";
position: absolute;
top: -120px; right: -120px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(13,110,253,.06) 0%, transparent 70%);
pointer-events: none;
}
:where([data-page~="home"]) .feature-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1.5rem;
padding: 2.25rem;
height: 100%;
transition: all .4s cubic-bezier(.16,1,.3,1);
position: relative; overflow: hidden;
}
:where([data-page~="home"]) .feature-card::after {
content: "";
position: absolute; inset: 0;
border-radius: 1.5rem;
background: linear-gradient(135deg, #0d6efd, #0a58ca);
opacity: 0; transition: opacity .4s;
z-index: 0;
}
:where([data-page~="home"]) .feature-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 24px 48px rgba(13,110,253,.18); }
:where([data-page~="home"]) .feature-card:hover::after { opacity: 1; }
:where([data-page~="home"]) .feature-card:hover * { position: relative; z-index: 1; color: #fff !important; }
:where([data-page~="home"]) .feature-card:hover .feature-icon-wrap { background: rgba(255,255,255,.2) !important; }
:where([data-page~="home"]) .feature-card:hover p { opacity: .88; }
:where([data-page~="home"]) .feature-num {
font-size: .72rem; font-weight: 700; letter-spacing: .1em;
color: #94a3b8; text-transform: uppercase;
margin-bottom: .75rem; display: block;
}
:where([data-page~="home"]) .feature-icon-wrap {
width: 56px; height: 56px;
background: rgba(13,110,253,.1);
border-radius: 1rem;
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; color: #0d6efd;
margin-bottom: 1.25rem;
transition: background .4s;
}
:where([data-page~="home"]) .feature-card h5 { font-weight: 700; font-size: 1.05rem; color: #0f172a; margin-bottom: .6rem; }
:where([data-page~="home"]) .feature-card p { color: #64748b; font-size: .9rem; line-height: 1.65; margin: 0; }
/* ═══════════════════════════════════════════════
PRODUCTS
═══════════════════════════════════════════════ */
:where([data-page~="home"]) .products-bg { background: #fff; }
/* ═══════════════════════════════════════════════
TESTIMONIALS
═══════════════════════════════════════════════ */
:where([data-page~="home"]) .testimonials-bg {
background: linear-gradient(180deg, #0f172a 0%, #0a2a5c 100%);
position: relative; overflow: hidden;
}
:where([data-page~="home"]) .testimonials-bg::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at 20% 50%, rgba(13,110,253,.25) 0%, transparent 60%),
radial-gradient(ellipse at 80% 50%, rgba(13,110,253,.2) 0%, transparent 60%);
}
:where([data-page~="home"]) .testimonials-bg .eyebrow { color: #6ea8fe; background: rgba(158,197,254,.12); border-color: rgba(158,197,254,.25); }
:where([data-page~="home"]) .testimonials-bg .section-title { color: #f1f5f9; }
:where([data-page~="home"]) .testimonials-bg .section-sub { color: #94a3b8; }
:where([data-page~="home"]) .testi-card {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 1.5rem;
padding: 2rem;
height: 100%;
backdrop-filter: blur(10px);
transition: all .35s;
}
:where([data-page~="home"]) .testi-card:hover { background: rgba(255,255,255,.09); border-color: rgba(158,197,254,.3); transform: translateY(-4px); }
:where([data-page~="home"]) .testi-stars { color: #fbbf24; font-size: .8rem; margin-bottom: 1rem; letter-spacing: .05em; }
:where([data-page~="home"]) .testi-text { color: #cbd5e1; font-size: .92rem; line-height: 1.75; margin-bottom: 1.5rem; font-style: italic; }
:where([data-page~="home"]) .testi-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #0d6efd; }
:where([data-page~="home"]) .testi-avatar-ph {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, #0d6efd, #0a58ca);
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 700; font-size: 1rem; flex-shrink: 0;
}
:where([data-page~="home"]) .testi-name { font-weight: 700; font-size: .92rem; color: #f1f5f9; margin: 0; }
:where([data-page~="home"]) .testi-role { font-size: .78rem; color: #64748b; margin: 0; }
/* ═══════════════════════════════════════════════
BLOG
═══════════════════════════════════════════════ */
:where([data-page~="home"]) .blog-bg { background: #f8fafc; }
:where([data-page~="home"]) .blog-featured {
border-radius: 1.5rem; overflow: hidden;
background: #fff; border: 1px solid #e2e8f0;
height: 100%;
transition: all .4s cubic-bezier(.16,1,.3,1);
display: flex; flex-direction: column;
}
:where([data-page~="home"]) .blog-featured:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,.1); border-color: rgba(13,110,253,.2); }
:where([data-page~="home"]) .blog-featured .img-wrap { height: 320px; overflow: hidden; position: relative; }
:where([data-page~="home"]) .blog-featured .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
:where([data-page~="home"]) .blog-featured:hover .img-wrap img { transform: scale(1.06); }
:where([data-page~="home"]) .blog-featured .body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
:where([data-page~="home"]) .blog-featured h4 { font-weight: 800; font-size: 1.2rem; color: #0f172a; line-height: 1.35; margin-bottom: .6rem; }
:where([data-page~="home"]) .blog-mini {
border-radius: 1.25rem; overflow: hidden;
background: #fff; border: 1px solid #e2e8f0;
display: flex; gap: 1rem; align-items: flex-start;
padding: 1rem;
transition: all .35s;
}
:where([data-page~="home"]) .blog-mini:hover { transform: translateX(4px); border-color: rgba(13,110,253,.2); box-shadow: 4px 4px 20px rgba(0,0,0,.06); }
:where([data-page~="home"]) .blog-mini .img-wrap { width: 88px; height: 80px; flex-shrink: 0; border-radius: .75rem; overflow: hidden; }
:where([data-page~="home"]) .blog-mini .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
:where([data-page~="home"]) .blog-mini h6 { font-weight: 700; font-size: .88rem; color: #0f172a; line-height: 1.35; margin-bottom: .3rem; }
:where([data-page~="home"]) .blog-mini .meta { font-size: .75rem; color: #94a3b8; }
:where([data-page~="home"]) .blog-cat {
display: inline-block;
font-size: .7rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: #0d6efd; background: rgba(13,110,253,.08);
padding: .2rem .7rem; border-radius: 2rem;
margin-bottom: .75rem;
}
:where([data-page~="home"]) .blog-date { font-size: .78rem; color: #94a3b8; }
:where([data-page~="home"]) .blog-desc { font-size: .88rem; color: #64748b; line-height: 1.6; flex: 1; }
:where([data-page~="home"]) .btn-read { color: #0d6efd; font-weight: 700; text-decoration: none; font-size: .85rem; display: inline-flex; align-items: center; gap: .35rem; }
:where([data-page~="home"]) .btn-read:hover { color: #0a58ca; }
:where([data-page~="home"]) .btn-read i { transition: transform .2s; }
:where([data-page~="home"]) .btn-read:hover i { transform: translateX(4px); }
/* Call to action: card panel inside the container, text left, actions right,
quick contacts below. Ring decoration is CSS only. */
:where([data-page~="home"]) .cta-blok { padding: 4.5rem 0; }
:where([data-page~="home"]) .cta-kartu {
position: relative; overflow: hidden; isolation: isolate;
display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 2.5rem 3.5rem; align-items: center;
padding: 3.25rem 3.5rem;
border-radius: 24px;
background: var(--primary); color: #fff;
box-shadow: 0 30px 60px -38px color-mix(in srgb, var(--primary) 85%, #000);
}
:where([data-page~="home"]) .cta-kartu::before, :where([data-page~="home"]) .cta-kartu::after {
content: ""; position: absolute; z-index: -1; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .14); pointer-events: none;
}
:where([data-page~="home"]) .cta-kartu::before { width: 420px; height: 420px; right: -120px; top: -190px; }
:where([data-page~="home"]) .cta-kartu::after { width: 640px; height: 640px; right: -250px; top: -300px; border-color: rgba(255, 255, 255, .08); }
:where([data-page~="home"]) .cta-label {
display: inline-flex; align-items: center; gap: .45rem;
padding: .38rem .8rem; margin-bottom: 1rem; border-radius: 999px;
background: rgba(255, 255, 255, .12); color: #fff;
font: 600 .78rem/1 var(--font-body); letter-spacing: .02em;
}
:where([data-page~="home"]) .cta-label .titik { width: 7px; height: 7px; border-radius: 50%; background: #5ee08f; box-shadow: 0 0 0 3px rgba(94, 224, 143, .25); }
:where([data-page~="home"]) .cta-kartu h2 {
font-family: var(--font-display); font-weight: 800; color: #fff;
font-size: clamp(1.7rem, 1.45rem + 1.1vw, 2.5rem); line-height: 1.12; letter-spacing: -.025em;
margin: 0 0 .85rem;
}
:where([data-page~="home"]) .cta-kartu .cta-teks { color: rgba(255, 255, 255, .8); font-size: 1.02rem; line-height: 1.6; margin: 0; max-width: 34rem; }
:where([data-page~="home"]) .cta-aksi { display: flex; flex-direction: column; gap: .75rem; }
:where([data-page~="home"]) .cta-tombol {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 1rem 1.15rem 1rem 1.35rem; border-radius: 14px;
font-weight: 600; font-size: .98rem; text-decoration: none;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
:where([data-page~="home"]) .cta-tombol .bulat {
flex: 0 0 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center; font-size: .8rem;
transition: transform .18s ease;
}
:where([data-page~="home"]) .cta-tombol:hover .bulat { transform: translateX(3px); }
:where([data-page~="home"]) .cta-tombol-utama { background: #fff; color: var(--primary); }
:where([data-page~="home"]) .cta-tombol-utama .bulat { background: var(--primary); color: #fff; }
:where([data-page~="home"]) .cta-tombol-utama:hover { background: #f1f4fb; color: var(--primary); }
:where([data-page~="home"]) .cta-tombol-kedua { border: 1px solid rgba(255, 255, 255, .32); color: #fff; }
:where([data-page~="home"]) .cta-tombol-kedua .bulat { background: rgba(255, 255, 255, .14); color: #fff; }
:where([data-page~="home"]) .cta-tombol-kedua:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); color: #fff; }
:where([data-page~="home"]) .cta-kontak {
display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
margin-top: .35rem; font-size: .88rem; color: rgba(255, 255, 255, .72);
}
:where([data-page~="home"]) .cta-kontak a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
:where([data-page~="home"]) .cta-kontak a:hover { text-decoration-color: #fff; }
@media (max-width: 991.98px) {
:where([data-page~="home"]) .cta-kartu { grid-template-columns: 1fr; padding: 2.5rem 2.25rem; gap: 1.75rem; }
:where([data-page~="home"]) .cta-kartu .cta-teks { max-width: none; }
}
@media (max-width: 575.98px) {
:where([data-page~="home"]) .cta-blok { padding: 3rem 0; }
:where([data-page~="home"]) .cta-kartu { padding: 2rem 1.35rem; border-radius: 18px; }
:where([data-page~="home"]) .cta-kartu::before { width: 260px; height: 260px; right: -110px; top: -120px; }
:where([data-page~="home"]) .cta-kartu::after { display: none; }
}
/* ═══════════════════════════════════════════════
REVEAL
═══════════════════════════════════════════════ */
/* Reveal animation is disabled: elements render as is. */
:where([data-page~="home"]) .reveal, :where([data-page~="home"]) .reveal.active { opacity: 1; transform: none; transition: none; }
:where([data-page~="home"]) .reveal-delay-1, :where([data-page~="home"]) .reveal-delay-2, :where([data-page~="home"]) .reveal-delay-3 { transition-delay: 0s; }
:where([data-page~="home"]) .fw-700 { font-weight: 700; }
/* Home hero: left-aligned, content height, with proof (clients, years,
articles, products) visible above the fold. */
:where([data-page~="home"]) .hero {
position: relative;
/* The top padding includes the fixed ~70px navbar; without an eyebrow label
the title needs extra space below it. */
padding: clamp(144px, 12.5vw, 186px) 0 clamp(108px, 9vw, 144px) !important;
background: var(--paper) !important;
min-height: 0 !important;
}
:where([data-page~="home"]) .hero::before, :where([data-page~="home"]) .hero::after { display: none !important; }
:where([data-page~="home"]) .hero-bg-img, :where([data-page~="home"]) .hero-spot, :where([data-page~="home"]) .hero-orb, :where([data-page~="home"]) .hero-dots, :where([data-page~="home"]) .hero-scroll { display: none !important; }
:where([data-page~="home"]) .hero-inner { max-width: none !important; margin: 0 !important; }
:where([data-page~="home"]) .hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr);
gap: clamp(26px, 5vw, 58px);
align-items: center;
}
:where([data-page~="home"]) .hero h1 {
font-family: var(--font-display) !important;
font-size: clamp(2rem, 1.677rem + 1.436vw, 3.4rem) !important;
font-weight: 700; line-height: 1.1 !important;
letter-spacing: -.035em !important;
color: var(--ink) !important;
margin: 0 !important; text-align: left !important;
}
:where([data-page~="home"]) .hero h1 .gradient-text {
background: none !important; -webkit-text-fill-color: currentColor !important;
color: var(--primary) !important; animation: none !important;
}
:where([data-page~="home"]) .hero-desc {
margin: 18px 0 0 !important; color: var(--ink-2) !important;
font-size: clamp(1rem, 0.9723rem + 0.1231vw, 1.12rem); max-width: 52ch; text-align: left !important;
}
:where([data-page~="home"]) .hero-cta { justify-content: flex-start !important; margin-top: 26px !important; }
:where([data-page~="home"]) .btn-hero-primary {
background: var(--primary) !important; color: var(--accent-ink) !important;
border: 1px solid var(--primary) !important; border-radius: 8px !important;
box-shadow: none !important;
}
:where([data-page~="home"]) .btn-hero-primary:hover { background: color-mix(in srgb, var(--primary) 86%, #000) !important; }
:where([data-page~="home"]) .btn-hero-ghost {
background: transparent !important; color: var(--ink) !important;
border: 1px solid var(--line) !important; border-radius: 8px !important;
}
:where([data-page~="home"]) .btn-hero-ghost:hover { background: var(--sunken) !important; }
:where([data-page~="home"]) .hero-proof {
display: flex !important; flex-wrap: wrap; gap: 0;
margin-top: 34px !important; padding-top: 20px !important;
border-top: 1px solid var(--line) !important; justify-content: flex-start !important;
}
:where([data-page~="home"]) .hero-proof .pf { padding-right: 26px; margin-right: 26px; border-right: 1px solid var(--line); }
:where([data-page~="home"]) .hero-proof .pf:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
:where([data-page~="home"]) .hero-proof .pf b {
display: block; font: 600 1.5rem/1 var(--font-mono);
font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -.02em;
}
:where([data-page~="home"]) .hero-proof .pf span { font-size: .78rem; color: var(--ink-3); }
/* Product index card: each row is a real link with a one-line role,
giving the hero a way out. */
:where([data-page~="home"]) .hero-aside {
border: 1px solid var(--line); border-radius: 14px;
background: var(--paper); padding: 8px 20px 14px; min-width: 0;
position: relative; z-index: 1;
box-shadow: 0 18px 40px -30px rgba(16, 21, 31, .45);
/* Override the hero's centered alignment so product names stay left. */
text-align: left !important;
}
:where([data-page~="home"]) .hero-aside h2 {
font: 600 .82rem/1 var(--font-body); letter-spacing: 0;
text-transform: none; color: var(--ink-3);
margin: 0; padding: 14px 0 12px; border-bottom: 1px solid var(--line);
}
:where([data-page~="home"]) .hero-aside .pk {
display: grid; grid-template-columns: 1fr auto; align-items: center;
gap: 4px 14px; padding: 13px 0; border-bottom: 1px solid var(--line);
text-decoration: none;
}
:where([data-page~="home"]) .hero-aside .pk-n {
font-family: var(--font-display); font-weight: 600; font-size: 1rem;
color: var(--ink); letter-spacing: -.015em;
}
:where([data-page~="home"]) .hero-aside .pk-d {
grid-column: 1; font-size: .82rem; line-height: 1.45; color: var(--ink-3);
}
:where([data-page~="home"]) .hero-aside .pk i {
/* Set grid-column too; grid-row alone would put the arrow in the first column. */
grid-row: 1 / span 2; grid-column: 2;
font-size: .72rem; color: var(--ink-3);
transition: transform .18s, color .18s;
}
:where([data-page~="home"]) .hero-aside .pk:hover .pk-n { color: var(--primary); }
:where([data-page~="home"]) .hero-aside .pk:hover i { color: var(--primary); transform: translateX(3px); }
:where([data-page~="home"]) .hero-aside .pk-all {
display: inline-flex; align-items: center; gap: .45rem;
margin-top: 13px; font-size: .84rem; font-weight: 600;
color: var(--primary); text-decoration: none;
}
:where([data-page~="home"]) .hero-aside .pk-all i { font-size: .7rem; transition: transform .18s; }
:where([data-page~="home"]) .hero-aside .pk-all:hover i { transform: translateX(3px); }
@media (max-width: 860px) {
:where([data-page~="home"]) .hero-grid { grid-template-columns: 1fr; }
/* Mobile hero padding clears the ~61px navbar with room to breathe. */
:where([data-page~="home"]) .hero { padding: 132px 0 72px !important; }
/* CTA sits directly on the figures band below. */
:where([data-page~="home"]) .hero-cta { margin-bottom: 22px !important; }
}
/* Public token alignment: section markers become small labels and cards are
separated by borders instead of shadows. */
:where([data-page~="home"]) .eyebrow {
display: inline-block !important;
background: none !important; border: 0 !important; padding: 0 !important;
margin-bottom: .6rem !important;
font: 600 11px/1 var(--font-mono) !important;
letter-spacing: .16em !important; text-transform: uppercase !important;
color: var(--ink-3) !important;
}
:where([data-page~="home"]) .testimonials-bg .eyebrow { color: #9aa6bf !important; background: none !important; }
:where([data-page~="home"]) .section-title {
font-family: var(--font-display);
font-weight: 600 !important;
font-size: clamp(1.55rem, 1.412rem + 0.6154vw, 2.15rem) !important;
color: var(--ink) !important;
letter-spacing: -.03em !important;
}
:where([data-page~="home"]) .section-sub { color: var(--ink-2) !important; }
/* Not applied to .product-card: its design lives in base_public, and this
radius would override it (page styles load after the base ones). */
:where([data-page~="home"]) .feature-card, :where([data-page~="home"]) .blog-card {
box-shadow: none !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-lg) !important;
transition: border-color .2s ease, transform .2s ease !important;
}
:where([data-page~="home"]) .feature-card:hover, :where([data-page~="home"]) .blog-card:hover {
border-color: color-mix(in srgb, var(--primary) 45%, var(--line)) !important;
transform: none !important;
box-shadow: 0 10px 28px -22px rgba(16, 21, 31, .5) !important;
}
:where([data-page~="home"]) .feature-icon-wrap {
background: var(--accent-soft) !important;
color: var(--primary) !important;
box-shadow: none !important;
border-radius: 10px !important;
}
:where([data-page~="home"]) .features-bg { background: var(--sunken) !important; }
/* Proof bar on phones: a 2x2 grid with dividers following the grid. */
@media (max-width: 575.98px) {
:where([data-page~="home"]) .hero-proof {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 14px 0;
}
:where([data-page~="home"]) .hero-proof .pf {
padding-right: 0; margin-right: 0; border-right: 0;
padding-left: 14px; border-left: 1px solid var(--line);
}
:where([data-page~="home"]) .hero-proof .pf:nth-child(odd) { padding-left: 0; border-left: 0; }
:where([data-page~="home"]) .hero-proof .pf b { font-size: 1.35rem; }
:where([data-page~="home"]) .hero-cta { flex-direction: column; align-items: stretch; }
:where([data-page~="home"]) .hero-cta .btn-hero-primary, :where([data-page~="home"]) .hero-cta .btn-hero-ghost {
width: 100%; justify-content: center; text-align: center;
}
}
/* Hero graphic: rounded tiles extending past the right edge.
Built with CSS + SVG: sharp at any density, follows tokens, no downloads.
Decoration must never displace the content card above it. */
:where([data-page~="home"]) .hero { overflow: hidden; }
:where([data-page~="home"]) .hero-tiles {
position: absolute; z-index: 0;
/* Tiles are a background layer across the whole hero, behind all content.
Being semi-transparent and at the bottom, overlap with the card is intended. */
position: absolute; inset: 0; z-index: 0;
pointer-events: none; overflow: hidden;
}
:where([data-page~="home"]) .hero-tiles i {
position: absolute; border-radius: 22px;
display: grid; place-items: center; opacity: .5;
}
/* Tiles sit fully inside the hero area. */
/* Tiles are spread over empty areas: the bottom band and the top-right edge. */
:where([data-page~="home"]) .hero-tiles i:nth-child(1) { width: 104px; height: 104px; right: 4%; top: 19%; }
:where([data-page~="home"]) .hero-tiles i:nth-child(2) { width: 132px; height: 132px; right: 26%; top: 74%; }
:where([data-page~="home"]) .hero-tiles i:nth-child(3) { width: 92px; height: 92px; right: 6%; top: 70%; }
:where([data-page~="home"]) .hero-tiles i:nth-child(4) { width: 116px; height: 116px; left: 7%; top: 76%; }
:where([data-page~="home"]) .hero-tiles i svg { width: 38px; height: 38px; }
@media (max-width: 860px) {
/* On phones the hero stacks; tiles are smaller and fainter so they stay texture. */
:where([data-page~="home"]) .hero-tiles i { opacity: .28; transform: scale(.68); }
}
/* Subtle motion: each tile floats with a different phase. Disabled for
prefers-reduced-motion. */
@keyframes ubin-apung {
0%, 100% { transform: translateY(0) }
50% { transform: translateY(-10px) }
}
:where([data-page~="home"]) .hero-tiles i {
animation: ubin-apung 7s ease-in-out infinite;
will-change: transform;
}
:where([data-page~="home"]) .hero-tiles i:nth-child(2) { animation-duration: 8.5s; animation-delay: -1.4s; }
:where([data-page~="home"]) .hero-tiles i:nth-child(3) { animation-duration: 6.4s; animation-delay: -2.8s; }
:where([data-page~="home"]) .hero-tiles i:nth-child(4) { animation-duration: 9.2s; animation-delay: -0.7s; }
:where([data-page~="home"]) .hero-tiles i:nth-child(5) { animation-duration: 7.6s; animation-delay: -3.6s; }
:where([data-page~="home"]) .hero-tiles i:nth-child(6) { animation-duration: 8.1s; animation-delay: -2.1s; }
@media (prefers-reduced-motion: reduce) {
:where([data-page~="home"]) .hero-tiles i { animation: none !important; }
}
:where([data-page~="home"]) .hero-tiles i {
display: block; border-radius: 20px;
background: var(--accent-soft);
display: grid; place-items: center;
}
:where([data-page~="home"]) .hero-tiles i svg { width: 34px; height: 34px; opacity: .85; }
:where([data-page~="home"]) .hero-tiles .t-kuat { background: var(--primary); }
:where([data-page~="home"]) .hero-tiles .t-sedang { background: color-mix(in srgb, var(--primary) 38%, #ffffff); }
:where([data-page~="home"]) .hero-tiles .t-tipis { background: color-mix(in srgb, var(--primary) 14%, #ffffff); }
:where([data-page~="home"]) .hero-tiles .t-netral { background: var(--paper); border: 1px solid var(--line); }
:where([data-page~="home"]) .hero-tiles .t-kosong { background: transparent; }
:where([data-page~="home"]) .hero-tiles .t-tinggi { grid-row: span 2; height: auto; }
/* Hero text stays above the tiles */
:where([data-page~="home"]) .hero .hero-grid { position: relative; z-index: 1; }
@media (max-width: 1199.98px) { :where([data-page~="home"]) .hero-tiles { right: -200px; opacity: .55; } }
@media (max-width: 991.98px) { :where([data-page~="home"]) .hero-tiles { display: none; } }
/* Feature and testimonial cards.
Features: hover only emphasizes (accent icon tile and title, stronger border,
2px lift); the ::after overlay is disabled.
Testimonials: light like other sections; quotes are not italic for readability. */
:where([data-page~="home"]) .feature-card::after { content: none !important; }
:where([data-page~="home"]) .feature-card {
padding: 1.9rem 1.75rem !important;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
:where([data-page~="home"]) .feature-card:hover {
transform: translateY(-2px) !important;
border-color: color-mix(in srgb, var(--primary) 50%, var(--line)) !important;
box-shadow: 0 14px 32px -24px rgba(16, 21, 31, .55) !important;
}
:where([data-page~="home"]) .feature-card h5 {
font-family: var(--font-display) !important;
font-weight: 600 !important; font-size: 1.02rem !important;
letter-spacing: -.015em !important; color: var(--ink) !important;
}
:where([data-page~="home"]) .feature-card p { color: var(--ink-3) !important; font-size: .88rem !important; }
:where([data-page~="home"]) .feature-card:hover h5 { color: var(--primary) !important; }
:where([data-page~="home"]) .feature-card:hover p { color: var(--ink-2) !important; opacity: 1 !important; }
:where([data-page~="home"]) .feature-icon-wrap {
width: 44px !important; height: 44px !important;
font-size: 1.05rem !important; margin-bottom: 1.1rem !important;
transition: background .18s ease !important;
}
:where([data-page~="home"]) .feature-icon-wrap i { transition: color .18s ease; }
:where([data-page~="home"]) .feature-card:hover .feature-icon-wrap { background: var(--primary) !important; }
:where([data-page~="home"]) .feature-card:hover .feature-icon-wrap i { color: #fff !important; }
:where([data-page~="home"]) .testimonials-bg { background: var(--paper) !important; }
:where([data-page~="home"]) .testimonials-bg::before { content: none !important; }
:where([data-page~="home"]) .testimonials-bg .eyebrow { color: var(--ink-3) !important; }
:where([data-page~="home"]) .testimonials-bg .section-title { color: var(--ink) !important; }
:where([data-page~="home"]) .testimonials-bg .section-sub { color: var(--ink-2) !important; }
:where([data-page~="home"]) .testi-card {
background: var(--paper) !important;
border: 1px solid var(--line) !important;
border-radius: 14px !important;
padding: 1.75rem !important;
backdrop-filter: none !important;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
:where([data-page~="home"]) .testi-card:hover {
background: var(--paper) !important;
transform: translateY(-2px) !important;
border-color: color-mix(in srgb, var(--primary) 50%, var(--line)) !important;
box-shadow: 0 14px 32px -24px rgba(16, 21, 31, .55) !important;
}
:where([data-page~="home"]) .testi-stars { color: #d79a00 !important; }
:where([data-page~="home"]) .testi-text {
color: var(--ink-2) !important; font-style: normal !important;
font-size: .94rem !important; line-height: 1.7 !important;
}
:where([data-page~="home"]) .testi-name {
color: var(--ink) !important; font-weight: 600 !important;
font-family: var(--font-display) !important;
}
:where([data-page~="home"]) .testi-role { color: var(--ink-3) !important; }
:where([data-page~="home"]) .testi-avatar { border: 1px solid var(--line) !important; }
:where([data-page~="home"]) .testi-avatar-ph {
background: var(--accent-soft) !important; color: var(--primary) !important;
}
/* Hero right stage: decoration lives inside the right column (.hero-side),
so the text column can never be covered regardless of title length. */
:where([data-page~="home"]) .hero-tiles { display: none !important; }
/* Undo the hero's centered alignment at the column level so the label
above the title stays left. */
:where([data-page~="home"]) .hero-grid > div:first-child { text-align: left !important; }
:where([data-page~="home"]) .hero-side { position: relative; min-width: 0; }
:where([data-page~="home"]) .hero-art {
position: absolute; inset: -16% -10% -14% -12%;
z-index: 0; pointer-events: none;
}
:where([data-page~="home"]) .hero-art > * { position: absolute; }
/* Pale blue plane behind the card gives it something to stand on. */
:where([data-page~="home"]) .hero-art .blob { border-radius: 42% 58% 54% 46% / 48% 44% 56% 52%; }
:where([data-page~="home"]) .hero-art .b1 {
width: 74%; height: 72%; right: 2%; top: 6%;
background: color-mix(in srgb, var(--primary) 9%, #ffffff);
}
:where([data-page~="home"]) .hero-art .b2 {
width: 46%; height: 46%; left: 0; bottom: 4%;
background: color-mix(in srgb, var(--secondary) 16%, #ffffff);
border-radius: 56% 44% 48% 52% / 52% 56% 44% 48%;
}
/* Tilted sheets: depth without heavy shadows. */
:where([data-page~="home"]) .hero-art .sheet {
border-radius: 20px;
background: color-mix(in srgb, var(--primary) 7%, #ffffff);
border: 1px solid color-mix(in srgb, var(--primary) 12%, #ffffff);
}
:where([data-page~="home"]) .hero-art .s1 { width: 54%; height: 58%; right: 10%; top: 12%; transform: rotate(-8deg); }
:where([data-page~="home"]) .hero-art .s2 { width: 46%; height: 50%; right: 22%; top: 20%; transform: rotate(5deg); }
/* Orbit line + two dots. */
:where([data-page~="home"]) .hero-art .orbit { inset: 0; width: 100%; height: 100%; overflow: visible; }
:where([data-page~="home"]) .hero-art .orbit path { fill: none; stroke: color-mix(in srgb, var(--primary) 28%, #ffffff); stroke-width: 1.2; }
:where([data-page~="home"]) .hero-art .orbit circle { fill: var(--primary); }
/* Two dot grids as corner texture. */
:where([data-page~="home"]) .hero-art .dots {
width: 86px; height: 68px;
background-image: radial-gradient(color-mix(in srgb, var(--primary) 34%, #ffffff) 1.6px, transparent 1.6px);
background-size: 12px 12px;
}
:where([data-page~="home"]) .hero-art .d1 { left: 4%; top: 22%; }
:where([data-page~="home"]) .hero-art .d2 { right: 1%; bottom: 16%; }
/* Icon tiles: small white cards floating around the product card, outside
its footprint and never behind text. */
:where([data-page~="home"]) .hero-art .tile {
display: grid; place-items: center;
border-radius: 16px; background: var(--paper);
border: 1px solid var(--line);
box-shadow: 0 16px 34px -24px rgba(16, 21, 31, .55);
color: var(--primary);
animation: ubin-apung 7.5s ease-in-out infinite;
will-change: transform;
}
:where([data-page~="home"]) .hero-art .tile svg { width: 42%; height: 42%; }
:where([data-page~="home"]) .hero-art .tile.solid {
background: color-mix(in srgb, var(--primary) 16%, #ffffff);
border-color: color-mix(in srgb, var(--primary) 22%, #ffffff);
}
:where([data-page~="home"]) .hero-art .k1 { width: 76px; height: 76px; left: -2%; top: 2%; animation-duration: 8.4s; }
:where([data-page~="home"]) .hero-art .k2 { width: 66px; height: 66px; left: -6%; top: 46%; animation-duration: 6.8s; animation-delay: -2.2s; }
:where([data-page~="home"]) .hero-art .k3 { width: 72px; height: 72px; right: -4%; top: 14%; animation-duration: 9.1s; animation-delay: -1.1s; }
:where([data-page~="home"]) .hero-art .k4 { width: 80px; height: 80px; right: -6%; bottom: 6%; animation-duration: 7.9s; animation-delay: -3.4s; }
@media (prefers-reduced-motion: reduce) { :where([data-page~="home"]) .hero-art .tile { animation: none !important; } }
/* Below 992px columns stack and decoration has no room: hide it rather
than shrink it, so it never overlaps content. */
@media (max-width: 991.98px) { :where([data-page~="home"]) .hero-art { display: none; } }
/* ── Label above the title ── */
:where([data-page~="home"]) .hero-eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
padding: .42rem .9rem; margin-bottom: 1.1rem;
border-radius: var(--r-pill);
background: var(--hijau-soft);
color: var(--hijau-gelap);
font: 600 .82rem/1 var(--font-body);
letter-spacing: -.01em;
}
:where([data-page~="home"]) .hero-eyebrow i { font-size: .76rem; }
/* Emphasis at the end of the title. Text comes from the database and stays
escaped; only the **…** marker is parsed (see the `sorot` filter). */
:where([data-page~="home"]) .hero h1 .hl { color: var(--primary) !important; }
/* ── Proof row: figures with icon tiles ── */
:where([data-page~="home"]) .hero-proof .pf { display: flex; align-items: center; gap: .7rem; }
:where([data-page~="home"]) .hero-proof .pf .pf-ic {
flex: none; width: 42px; height: 42px; border-radius: var(--r-md);
display: grid; place-items: center;
background: var(--accent-soft); color: var(--primary); font-size: .95rem;
}
:where([data-page~="home"]) .hero-proof .pf b { font-size: 1.45rem; }
/* ── Ecosystem card ── */
:where([data-page~="home"]) .hero-aside {
padding: 20px !important;
border-radius: 18px !important;
box-shadow: 0 30px 60px -40px rgba(16, 21, 31, .55) !important;
/* Raised slightly with more room for five product rows. Column width is set
in .hero-grid. */
margin-top: -36px;
}
@media (min-width: 992px) {
:where([data-page~="home"]) .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
:where([data-page~="home"]) .hero-aside .pk-head { display: flex; align-items: center; gap: .6rem; }
:where([data-page~="home"]) .hero-aside .pk-head img { width: 26px; height: 26px; object-fit: contain; }
:where([data-page~="home"]) .hero-aside .pk-head h2 {
font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
letter-spacing: -.02em; color: var(--ink);
margin: 0; padding: 0; border: 0; text-transform: none;
}
:where([data-page~="home"]) .hero-aside .pk-lead {
margin: .5rem 0 1rem; font-size: .82rem; line-height: 1.5; color: var(--ink-3);
}
/* Each row is its own small card (icon, name + type, one-line role, arrow)
so products read as separate entry points. */
:where([data-page~="home"]) .hero-aside .pk {
grid-template-columns: auto 1fr auto !important;
gap: 2px 12px !important;
padding: 12px !important; border: 1px solid var(--line) !important;
border-radius: var(--r-md); margin-bottom: 8px;
transition: border-color .18s, background .18s;
}
:where([data-page~="home"]) .hero-aside .pk:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); background: var(--sunken); }
:where([data-page~="home"]) .hero-aside .pk .pk-ic {
/* Spans two grid rows but stays 38px tall; align-self keeps it from
stretching on two-line descriptions. */
grid-row: 1 / span 2; grid-column: 1; align-self: center;
width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
display: grid; place-items: center;
background: var(--accent-soft); color: var(--primary); font-size: .9rem;
}
/* `.hero-aside .pk i` sets grid-column: 2 on every icon in the card (meant
for the arrow). .pk-ic uses flex instead of grid so that placement does
not apply and the icon stays centered. */
:where([data-page~="home"]) .hero-aside .pk .pk-ic {
display: flex !important; align-items: center; justify-content: center;
}
:where([data-page~="home"]) .hero-aside .pk .pk-ic i {
display: block; width: auto; height: auto; line-height: 1; font-size: inherit;
}
:where([data-page~="home"]) .hero-aside .pk .pk-n { grid-column: 2; display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .95rem; }
/* Look of .pk-tag comes from the public badge system in base_public; size only here. */
:where([data-page~="home"]) .hero-aside .pk .pk-tag { font-size: .64rem; padding: .3em .62em; }
:where([data-page~="home"]) .hero-aside .pk .pk-d { grid-column: 2 !important; font-size: .78rem; }
:where([data-page~="home"]) .hero-aside .pk i.fa-arrow-right, :where([data-page~="home"]) .hero-aside .pk i.fa-chevron-right {
grid-row: 1 / span 2; grid-column: 3;
}
:where([data-page~="home"]) .hero-aside .pk-all { margin-top: 6px !important; }
@media (max-width: 991.98px) { :where([data-page~="home"]) .hero-aside { margin-top: 34px; } }
/* Stats band + features section: brand dark blue with clearly visible icons. */
:where([data-page~="home"]) .stats-section {
background: linear-gradient(135deg, #0f2a5e 0%, #17407f 52%, #0f2a5e 100%) !important;
padding: clamp(20px, 2.4vw, 30px) 0 !important;
overflow: hidden;
}
/* Two slanted planes at the edges give the band shape without images. */
:where([data-page~="home"]) .stats-section::before, :where([data-page~="home"]) .stats-section::after {
content: ""; position: absolute; top: -20%; bottom: -20%;
width: clamp(160px, 22vw, 360px);
background: rgba(255, 255, 255, .045);
transform: skewX(-16deg); pointer-events: none;
}
:where([data-page~="home"]) .stats-section::before { left: -6%; }
:where([data-page~="home"]) .stats-section::after { right: -6%; background: rgba(255, 255, 255, .07); }
:where([data-page~="home"]) .stats-inner { position: relative; z-index: 1; }
:where([data-page~="home"]) .stat-item { border-right-color: rgba(255, 255, 255, .18) !important; }
:where([data-page~="home"]) .stat-icon {
font-size: 1.35rem !important;
color: #8fb4ff !important;
opacity: 1 !important;
margin-bottom: .6rem !important;
}
:where([data-page~="home"]) .stat-number {
font-family: var(--font-display) !important;
font-weight: 700 !important;
font-size: clamp(1.6rem, 1.45rem + 0.6667vw, 2.25rem) !important;
letter-spacing: -.03em !important;
}
:where([data-page~="home"]) .stat-label { opacity: .72 !important; letter-spacing: .12em !important; }
/* ── Section marker: short line before the label ── */
:where([data-page~="home"]) .eyebrow::before {
content: ""; display: inline-block; vertical-align: middle;
width: 26px; height: 2px; border-radius: 2px;
background: var(--hijau); margin-right: 12px;
position: relative; top: -1px;
}
/* Section markers use the green accent: the title below already carries
blue (**…** emphasis), so the label adds the second color. */
:where([data-page~="home"]) .eyebrow { color: var(--hijau) !important; }
:where([data-page~="home"]) .testimonials-bg .eyebrow::before { background: #9aa6bf; }
/* Color emphasis in section titles, using the same **…** marker as the
hero title (`sorot` filter). */
:where([data-page~="home"]) .section-title .hl { color: var(--primary); }
/* ── Features section background ── */
:where([data-page~="home"]) .features-bg {
background: color-mix(in srgb, var(--primary) 4%, #ffffff) !important;
position: relative; overflow: hidden;
}
/* Pale slanted planes in two corners, matching the stats band above. */
:where([data-page~="home"]) .features-bg::before, :where([data-page~="home"]) .features-bg::after {
content: ""; position: absolute; pointer-events: none;
background: color-mix(in srgb, var(--primary) 7%, #ffffff);
transform: skewX(-16deg);
}
:where([data-page~="home"]) .features-bg::before { width: 30vw; top: -10%; height: 55%; right: -8vw; }
:where([data-page~="home"]) .features-bg::after { width: 26vw; bottom: -12%; height: 50%; left: -10vw; }
:where([data-page~="home"]) .features-bg .container { position: relative; z-index: 1; }
/* Decoration right of the title: line, dot, then a dot grid. */
:where([data-page~="home"]) .sec-deco {
display: flex; align-items: center; justify-content: flex-end; gap: 14px;
}
:where([data-page~="home"]) .sec-deco .ln { width: clamp(50px, 7vw, 92px); height: 2px; border-radius: 2px;
background: color-mix(in srgb, var(--primary) 45%, #ffffff); }
:where([data-page~="home"]) .sec-deco .dt { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
:where([data-page~="home"]) .sec-deco .mx {
width: 96px; height: 76px;
background-image: radial-gradient(color-mix(in srgb, var(--primary) 34%, #ffffff) 1.7px, transparent 1.7px);
background-size: 13px 13px;
}
@media (max-width: 991.98px) { :where([data-page~="home"]) .sec-deco { display: none; } }
/* Decoration no longer has its own column, so it must not narrow the text. */
:where([data-page~="home"]) .posisi-hiasan { position: relative; }
:where([data-page~="home"]) .posisi-hiasan > .sec-deco {
position: absolute; right: var(--bs-gutter-x, 1.5rem); top: 50%;
transform: translateY(-50%); pointer-events: none;
}
/* ── Feature cards ── */
:where([data-page~="home"]) .feature-card {
position: relative; overflow: hidden;
background: var(--paper) !important;
border: 1px solid color-mix(in srgb, var(--primary) 10%, #ffffff) !important;
border-radius: var(--r-lg) !important;
box-shadow: 0 20px 44px -34px rgba(16, 21, 31, .55) !important;
}
/* Folded corner: a small marker so six white cards do not read as empty boxes. */
:where([data-page~="home"]) .feature-card::before {
content: ""; position: absolute; top: 0; right: 0;
width: 58px; height: 58px; pointer-events: none;
background: linear-gradient(225deg,
color-mix(in srgb, var(--primary) 13%, #ffffff) 0 52%, transparent 52%);
}
:where([data-page~="home"]) .feature-card h5::after {
content: ""; display: block; width: 34px; height: 3px; border-radius: 2px;
background: var(--primary); margin-top: .6rem;
transition: width .18s ease;
}
:where([data-page~="home"]) .feature-card:hover h5::after { width: 52px; }
:where([data-page~="home"]) .feature-card h5 { margin-bottom: .85rem !important; }
:where([data-page~="home"]) .feature-icon-wrap {
width: 48px !important; height: 48px !important;
font-size: 1.15rem !important; border-radius: 12px !important;
}
/* ==== Page: templates/me/dashboard.html ==== */
:where([data-page~="me-dashboard"]) .me-container { padding: 120px 0 80px; background: #f8fafc; min-height: 100vh; }
:where([data-page~="me-dashboard"]) .me-sidebar { background: #fff; border-radius: 1.25rem; overflow: hidden; }
:where([data-page~="me-dashboard"]) .me-nav-link { padding: 1rem 1.5rem; display: flex; align-items: center; color: #64748b; text-decoration: none; transition: all 0.2s; border-left: 3px solid transparent; }
:where([data-page~="me-dashboard"]) .me-nav-link i { width: 24px; font-size: 1.1rem; margin-right: 12px; }
:where([data-page~="me-dashboard"]) .me-nav-link:hover { background: #f1f5f9; color: var(--primary); }
:where([data-page~="me-dashboard"]) .me-nav-link.active { background: rgba(var(--primary-rgb), 0.05); color: var(--primary); border-left-color: var(--primary); }
:where([data-page~="me-dashboard"]) .me-card { border: none; border-radius: 1.25rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); background: #fff; }
:where([data-page~="me-dashboard"]) .btn-white { background: #fff; color: var(--primary); border: 1px solid #fff; }
:where([data-page~="me-dashboard"]) .btn-white:hover { background: #f8fafc; color: #4338ca; }
:where([data-page~="me-dashboard"]) .rotate-15 { transform: rotate(-15deg); }
/* ==== Page: templates/offline.html ==== */
body:where([data-page~="offline"]) {
--glass-bg: rgba(255, 255, 255, 0.03);
--glass-border: rgba(255, 255, 255, 0.1);
--primary-glow: rgba(59, 130, 246, 0.5);
}
body:where([data-page~="offline"]) {
background: #0f172a;
overflow-x: hidden;
}
:where([data-page~="offline"]) .offline-wrapper {
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Mesh Gradient Background */
:where([data-page~="offline"]) .bg-glow {
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
filter: blur(80px);
opacity: 0.15;
z-index: 0;
pointer-events: none;
}
:where([data-page~="offline"]) .glass-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 2rem;
padding: 3rem;
max-width: 550px;
width: 90%;
text-align: center;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
z-index: 1;
animation: cardAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
:where([data-page~="offline"]) .icon-container {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto 2rem;
}
:where([data-page~="offline"]) .offline-icon {
font-size: 4rem;
color: #e2e8f0;
position: relative;
z-index: 2;
animation: iconFloat 3s ease-in-out infinite;
}
:where([data-page~="offline"]) .pulse-ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid var(--primary-glow);
border-radius: 50%;
animation: ringPulse 2s infinite;
opacity: 0;
}
:where([data-page~="offline"]) .offline-title {
font-family: "Outfit", sans-serif;
font-weight: 800;
font-size: 2.5rem;
background: linear-gradient(to right, #fff, #94a3b8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
}
:where([data-page~="offline"]) .offline-text {
color: #94a3b8;
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 2.5rem;
}
:where([data-page~="offline"]) .btn-retry {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border: none;
color: white;
padding: 1rem 2.5rem;
font-weight: 600;
border-radius: 1rem;
transition: all 0.3s ease;
box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);
}
:where([data-page~="offline"]) .btn-retry:hover {
transform: translateY(-2px);
box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.5);
color: white;
}
:where([data-page~="offline"]) .btn-home {
background: transparent;
border: 1px solid var(--glass-border);
color: #e2e8f0;
padding: 1rem 2.5rem;
font-weight: 600;
border-radius: 1rem;
transition: all 0.3s ease;
}
:where([data-page~="offline"]) .btn-home:hover {
background: var(--glass-border);
color: white;
}
@keyframes cardAppear {
from { opacity: 0; transform: translateY(30px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes iconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
@keyframes ringPulse {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(1.5); opacity: 0; }
}
:where([data-page~="offline"]) .status-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(239, 68, 68, 0.1);
color: #f87171;
border-radius: 2rem;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
:where([data-page~="offline"]) .dot {
width: 8px;
height: 8px;
background: #f87171;
border-radius: 50%;
box-shadow: 0 0 10px #ef4444;
}
/* ==== Page: templates/registration/register.html ==== */
:where([data-page~="registration-register"]) .password-wrapper {
position: relative;
}
:where([data-page~="registration-register"]) .password-toggle {
position: absolute;
right: 12px;
top: 35px;
cursor: pointer;
color: #94a3b8;
z-index: 10;
transition: color 0.2s;
}
:where([data-page~="registration-register"]) .password-toggle:hover {
color: var(--primary-color);
}
:where([data-page~="registration-register"]) .btn-suggest {
font-size: 0.75rem;
padding: 0;
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
display: inline-block;
margin-top: -10px;
margin-bottom: 15px;
transition: all 0.2s;
}
:where([data-page~="registration-register"]) .btn-suggest:hover {
color: #4338ca;
text-decoration: underline;
}
:where([data-page~="registration-register"]) .form-text {
font-size: .59rem;
}
:where([data-page~="registration-register"]) .swal2-popup {
border-radius: 1.5rem !important;
font-family: "Outfit", sans-serif !important;
}
/* ==== Component: apps/blog/templates/blog/_social_share_modal.html ==== */
.ss-stage { background: repeating-conic-gradient(#eef1f6 0% 25%, #f8fafc 0% 50%) 50% / 24px 24px; min-height: 320px; padding: 1.25rem; user-select: none; touch-action: pan-y; }
#ss-canvas { max-width: 100%; height: auto; background: #fff; cursor: grab; }
#ss-canvas:active { cursor: grabbing; }
.ss-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #111827; box-shadow: 0 6px 18px rgba(17,24,39,.18); z-index: 2; }
.ss-nav:hover { background: #1e62e0; color: #fff; }
.ss-nav-l { left: .5rem; } .ss-nav-r { right: .5rem; }
.ss-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--border-color-darker); padding: 0; }
.ss-dot.active { background: #1e62e0; width: 26px; border-radius: 6px; }
.ss-ratio.active { background: #1e62e0; color: #fff; }
.ss-mode[hidden] { display: none; }
.ss-modebtn.active { background: #1e62e0; color: #fff; border-color: #1e62e0; }
.ss-ratio.active .text-muted { color: rgba(255,255,255,.8) !important; }
.ss-spinner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.6); border-radius: 1rem; }
.ss-stage.ss-loading .ss-spinner { display: flex; }
.ss-slide-l { animation: ssSlideL .28s ease; } .ss-slide-r { animation: ssSlideR .28s ease; }
@keyframes ssSlideL { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes ssSlideR { from { transform: translateX(-30px); opacity: .4; } to { transform: none; opacity: 1; } }
/* ==== Component: apps/helpdesk/templates/helpdesk/_kepala.html ==== */
.kontak-kepala { padding: calc(var(--tinggi-navbar, 72px) + 28px) 0 0; background: var(--sunken); border-bottom: 1px solid var(--line); }
.kontak-kepala h1 { font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .35rem; color: var(--ink); }
.kontak-kepala p { color: var(--ink-2); margin: 0; max-width: 46rem; font-size: .98rem; }
.kontak-label { display: inline-block; margin-bottom: .4rem; }
.hd-tab { display: flex; gap: .25rem; margin-top: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.hd-tab::-webkit-scrollbar { display: none; }
.hd-tab a {
display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
padding: .7rem 1rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
color: var(--ink-2); font-weight: 600; font-size: .92rem; text-decoration: none;
}
.hd-tab a:hover { color: var(--ink); }
.hd-tab a.aktif { color: var(--primary); border-bottom-color: var(--primary); }
.hd-tab a i { font-size: .85rem; opacity: .8; }
/* ==== Component: apps/helpdesk/templates/helpdesk/_rekening.html ==== */
.rek-daftar { display: grid; gap: .75rem; }
.rek-kartu { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border: 1px solid var(--line, #e2e6f0); border-radius: 14px; background: var(--paper, #fff); }
.rek-logo { flex: 0 0 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--hijau-soft, #e7f5ec); color: var(--hijau, #0c8540); font-weight: 800; font-size: .8rem; overflow: hidden; }
.rek-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.rek-isi { min-width: 0; flex: 1; }
.rek-bank { font-size: .8rem; color: var(--ink-3, #737f96); font-weight: 600; }
.rek-nomor { font: 700 1.15rem/1.25 var(--font-mono, ui-monospace, monospace); letter-spacing: .04em; color: var(--ink, #10151f); }
.rek-nama { font-size: .85rem; color: var(--ink-2, #434e63); }
.rek-salin { flex: none; border: 1px solid var(--line, #e2e6f0); background: transparent; border-radius: 10px; padding: .45rem .7rem; font-size: .8rem; font-weight: 600; color: var(--ink-2, #434e63); }
.rek-salin:hover { color: var(--primary); border-color: var(--primary); }
.rek-salin.ok { color: var(--hijau, #0c8540); border-color: var(--hijau, #0c8540); }
.rek-rincian { display: grid; gap: .5rem; margin-top: .9rem; }
.rek-baris { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 1rem; border-radius: 12px; background: var(--sunken, #f3f5fa); font-size: .9rem; }
.rek-baris b { font-variant-numeric: tabular-nums; }
/* ==== Component: templates/elements/form_bertahap.html ==== */
form.bertahap-aktif [data-langkah] { display: none; }
form.bertahap-aktif [data-langkah].aktif { display: block; animation: bertahap-masuk .22s ease; }
@keyframes bertahap-masuk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
form.bertahap-aktif [data-langkah].aktif { animation: none; }
}
.bertahap-bar { display: none; gap: 6px; margin-bottom: 1.25rem; }
form.bertahap-aktif .bertahap-bar { display: flex; }
.bertahap-bar i {
height: 4px; flex: 1; border-radius: 2px;
background: var(--line, #e2e6f0); transition: background .2s ease;
}
.bertahap-bar i.aktif { background: var(--primary, #2957ab); }
.bertahap-mundur {
display: inline-flex; align-items: center; gap: .4rem;
background: none; border: 0; padding: 0; margin-bottom: 1rem;
color: var(--ink-3, #737f96); font-size: .84rem; font-weight: 600;
}
.bertahap-mundur:hover { color: var(--primary, #2957ab); }
/* Identity entered in a previous step, shown again so users know which
account they are signing in to. */
.bertahap-identitas {
display: inline-flex; align-items: center; gap: .6rem;
max-width: 100%; margin-bottom: 1.1rem;
padding: .4rem .5rem .4rem .9rem;
border: 1px solid var(--line, #e2e6f0); border-radius: 999px;
background: var(--paper, #fff); font-size: .86rem; color: var(--ink, #10151f);
}
.bertahap-identitas .nilai {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15rem;
}
.bertahap-identitas button {
background: none; border: 0; padding: .1rem .55rem;
color: var(--primary, #2957ab); font-size: .8rem; font-weight: 600;
}
/* ==== Component: templates/elements/preview_modal.html ==== */
.pm-tirai { position: fixed; inset: 0; z-index: 2000; background: rgba(12,17,28,.62);
backdrop-filter: blur(3px); display: flex; align-items: center;
justify-content: center; padding: clamp(8px, 2vw, 28px); }
.pm-tirai[hidden] { display: none; }
.pm-kotak { background: var(--paper); border-radius: var(--r-lg); width: min(1600px, 100%);
height: min(96vh, 100%); display: flex; flex-direction: column;
overflow: hidden; box-shadow: 0 24px 70px rgba(10,15,25,.45); }
.pm-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
padding: .7rem clamp(12px, 1.6vw, 20px); border-bottom: 1px solid var(--line); }
.pm-judul { margin: 0; font-weight: 700; font-size: .98rem; line-height: 1.25; }
.pm-harga { font-size: .84rem; color: var(--ink-3); }
.pm-label { font-size: .7rem; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--ink-3); }
.pm-skin-kel { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pm-skin { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .55rem;
border: 1px solid var(--line); border-radius: 999px; background: transparent;
font-size: .8rem; color: var(--ink-2); cursor: pointer; }
.pm-skin:hover { border-color: var(--primary); color: var(--ink); }
.pm-skin[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.pm-warna { display: inline-flex; border-radius: 999px; overflow: hidden; }
.pm-warna i { width: 9px; height: 9px; display: block; }
.pm-alat { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.pm-lebar, .pm-tutup { border: 1px solid var(--line); background: transparent;
border-radius: var(--r-md); width: 2.1rem; height: 2.1rem;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-2); cursor: pointer; text-decoration: none; }
.pm-lebar[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); }
.pm-tutup { border-color: transparent; font-size: 1.1rem; }
.pm-tutup:hover { background: var(--line); }
.pm-panggung { flex: 1; min-height: 0; display: flex; justify-content: center;
background: var(--bg-2, #eef1f5); padding: clamp(6px, 1vw, 14px); }
.pm-bingkai { width: 100%; height: 100%; border: 0; border-radius: var(--r-md);
background: #fff; transition: max-width .25s ease; }
.pm-panggung[data-lebar="tablet"] .pm-bingkai { max-width: 834px; }
.pm-panggung[data-lebar="ponsel"] .pm-bingkai { max-width: 414px; }
.pm-catatan { margin: 0; padding: .5rem clamp(12px, 1.6vw, 20px) .7rem;
font-size: .78rem; color: var(--ink-3); border-top: 1px solid var(--line); }
@media (max-width: 575.98px) {
.pm-alat { margin-left: 0; }
.pm-kotak { height: 100%; border-radius: var(--r-md); }
/* Seven wrapping color options take four rows on phones; scroll them
horizontally instead. */
.pm-skin-kel { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
-webkit-overflow-scrolling: touch; }
.pm-skin-kel::-webkit-scrollbar { display: none; }
.pm-skin { flex: 0 0 auto; }
.pm-label { flex: 0 0 auto; }
}