/* KabarKabar — Critical CSS (inlined in ) */ /* Only above-the-fold styles: ticker, header, hero, reset */ /* === Reset & Base === */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.6; color:var(--text-primary); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{cursor:pointer;border:none;background:none;font:inherit} input{font:inherit} /* === CSS Custom Properties === */ :root{ /* Colors — Light */ --bg:#FAF8F5; --surface:#FFFFFF; --text-primary:#1A1A1A; --text-secondary:#6B6B6B; --accent:#C8922A; --accent-hover:#A87820; --border:#E5E0DA; /* Category Colors */ --cat-politik:#C45B3E; --cat-ekonomi:#2A7EC8; --cat-teknologi:#6C5CE7; --cat-olahraga:#27AE60; --cat-hiburan:#E84393; --cat-gayahidup:#F39C12; /* Spacing */ --gap:1.5rem; --gap-lg:2.5rem; --gap-xl:4rem; --container:1280px; --radius:8px; /* Shadows */ --shadow-sm:0 1px 3px rgba(0,0,0,.06); --shadow-md:0 4px 12px rgba(0,0,0,.08); --shadow-lg:0 8px 24px rgba(0,0,0,.1); /* Transitions */ --ease:cubic-bezier(.4,0,.2,1); --duration:250ms; } /* Dark mode via attribute (JS toggle) */ [data-theme="dark"]{ --bg:#111111; --surface:#1A1A1A; --text-primary:#F0EDE8; --text-secondary:#9A9A9A; --accent:#D4A43A; --accent-hover:#E0B84A; --border:#2A2A2A; --shadow-sm:0 1px 3px rgba(0,0,0,.2); --shadow-md:0 4px 12px rgba(0,0,0,.25); --shadow-lg:0 8px 24px rgba(0,0,0,.3); } /* Dark mode via system preference (no-JS fallback) */ @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#111111; --surface:#1A1A1A; --text-primary:#F0EDE8; --text-secondary:#9A9A9A; --accent:#D4A43A; --accent-hover:#E0B84A; --border:#2A2A2A; } } /* === Typography === */ @font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap; src:url(https://fonts.gstatic.com/s/playfairdisplay/v37/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtM.woff2) format('woff2'); } .font-serif{font-family:'Playfair Display',Georgia,'Times New Roman',serif} .font-sans{font-family:'Inter',system-ui,-apple-system,sans-serif} /* === Layout === */ .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gap); } /* === Skip Link (a11y) === */ .skip-link{ position:absolute; top:-100%; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; padding:.5rem 1.5rem; border-radius:0 0 var(--radius) var(--radius); z-index:9999; font-weight:600; transition:top var(--duration) var(--ease); } .skip-link:focus{top:0} /* === Ticker === */ .ticker{ background:var(--accent); color:#fff; padding:.4rem 0; overflow:hidden; white-space:nowrap; font-size:.85rem; font-weight:500; } .ticker__inner{ display:inline-flex; gap:3rem; animation:ticker-scroll 30s linear infinite; } .ticker__label{ background:rgba(0,0,0,.2); padding:.15rem .75rem; border-radius:3px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:.75rem; flex-shrink:0; } .ticker__item{flex-shrink:0} .ticker__item a{color:#fff} .ticker__item a:hover{text-decoration:underline} @keyframes ticker-scroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } /* === Header === */ .site-header{ background:var(--bg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease); } .site-header.header--hidden{ transform:translateY(-100%); } .site-header.header--scrolled{ box-shadow:var(--shadow-md); } .header__inner{ display:flex; align-items:center; justify-content:space-between; padding:1rem 0; } /* Masthead */ .site-logo{ font-family:'Playfair Display',Georgia,serif; font-size:2rem; font-weight:700; letter-spacing:-.5px; color:var(--text-primary); } .site-logo span{color:var(--accent)} /* Nav */ .main-nav{display:flex;align-items:center;gap:0} .main-nav__list{display:flex;gap:.25rem} .main-nav__link{ padding:.5rem .85rem; font-size:.9rem; font-weight:500; color:var(--text-secondary); border-radius:var(--radius); transition:color var(--duration) var(--ease),background var(--duration) var(--ease); position:relative; } .main-nav__link:hover,.main-nav__link.nav-active{ color:var(--accent); } .main-nav__link.nav-active::after{ content:''; position:absolute; bottom:0;left:50%; transform:translateX(-50%); width:60%; height:2px; background:var(--accent); border-radius:1px; } /* Header Actions */ .header__actions{display:flex;align-items:center;gap:.5rem} .header__btn{ width:40px;height:40px; display:flex;align-items:center;justify-content:center; border-radius:50%; color:var(--text-secondary); transition:background var(--duration) var(--ease),color var(--duration) var(--ease); } .header__btn:hover{ background:var(--border); color:var(--text-primary); } .header__btn svg{width:20px;height:20px} /* Hamburger (mobile) */ .hamburger{display:none} /* === Hero Bento Grid === */ .hero-grid{ display:grid; grid-template-columns:1fr .42fr .42fr; grid-template-rows:200px 200px; gap:var(--gap); margin:var(--gap-lg) 0; } .hero-grid__main{ grid-row:1/3; position:relative; border-radius:var(--radius); overflow:hidden; } .hero-grid__main img{ width:100%;height:100%; object-fit:cover; } .hero-grid__main .hero-overlay{ position:absolute; bottom:0;left:0;right:0; padding:var(--gap-lg) var(--gap); background:linear-gradient(transparent,rgba(0,0,0,.75)); color:#fff; } .hero-grid__main .hero-overlay .cat-tag{ display:inline-block; padding:.2rem .6rem; border-radius:3px; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:.5rem; } .hero-grid__main .hero-overlay h2{ font-family:'Playfair Display',Georgia,serif; font-size:1.75rem; line-height:1.2; margin-bottom:.25rem; } .hero-grid__sub{ position:relative; border-radius:var(--radius); overflow:hidden; } .hero-grid__sub img{ width:100%;height:100%; object-fit:cover; } .hero-grid__sub .hero-overlay{ position:absolute; bottom:0;left:0;right:0; padding:var(--gap) .75rem; background:linear-gradient(transparent,rgba(0,0,0,.75)); color:#fff; } .hero-grid__sub .hero-overlay h3{ font-family:'Playfair Display',Georgia,serif; font-size:1rem; line-height:1.3; } /* Trending Sidebar */ .trending-panel{ grid-column:3; grid-row:1/3; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--gap); overflow-y:auto; } .trending-panel__title{ font-family:'Playfair Display',Georgia,serif; font-size:1.25rem; font-weight:700; margin-bottom:var(--gap); padding-bottom:.75rem; border-bottom:2px solid var(--accent); } .trending-panel__list{display:flex;flex-direction:column;gap:.75rem} .trending-panel__item{ display:flex; gap:.75rem; align-items:flex-start; } .trending-panel__num{ font-family:'Playfair Display',Georgia,serif; font-size:1.5rem; font-weight:700; color:var(--accent); line-height:1; min-width:1.75rem; } .trending-panel__text{ font-size:.9rem; font-weight:500; line-height:1.4; color:var(--text-primary); } .trending-panel__text:hover{color:var(--accent)} .trending-panel__meta{ font-size:.75rem; color:var(--text-secondary); margin-top:.2rem; } /* === Responsive (Mobile) === */ @media(max-width:767px){ .site-logo{font-size:1.5rem} .main-nav__list{display:none} .hamburger{display:flex} .hero-grid{ grid-template-columns:1fr 1fr; grid-template-rows:220px auto; gap:.75rem; } .hero-grid__main{grid-column:1/3;grid-row:1} .hero-grid__main .hero-overlay h2{font-size:1.25rem} .hero-grid__sub .hero-overlay h3{font-size:.85rem} .trending-panel{ grid-column:1/3; grid-row:3; } } /* === Reduced Motion === */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important; } html{scroll-behavior:auto} } /* === Focus Visible === */ :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* === Print === */ @media print{ .ticker,.site-header,.ad-slot,.site-footer,.back-to-top,.share-buttons,.mobile-nav-overlay{display:none!important} body{background:#fff;color:#000;font-size:12pt} a[href]::after{content:" (" attr(href) ")";font-size:.8em;color:#666} }