/* base.css - minimal reset + typography. No hex/font literals (all values come from tokens.css). Breakpoints: 1024px / 767px only. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--pkf-font-body); font-size: var(--pkf-body); line-height: 1.7; color: var(--pkf-ink); background: var(--pkf-bg); } h1, h2, h3 { font-family: var(--pkf-font-head); color: var(--pkf-ink); } h1 { font-size: var(--pkf-h1); font-weight: 700; line-height: 1.25; } h2 { font-size: var(--pkf-h2); font-weight: 600; line-height: 1.3; } h3 { font-size: var(--pkf-h3); font-weight: 600; line-height: 1.35; } h4 { font-size: var(--pkf-h4); font-family: var(--pkf-font-body); line-height: 1.4; } p { margin-bottom: var(--pkf-s2); } a { color: var(--pkf-ink); transition: color var(--pkf-duration) var(--pkf-ease); } a:hover { color: var(--pkf-red); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--pkf-red); outline-offset: 2px; } .pkf-cta a:focus-visible, .pkf-cta button:focus-visible, .pkf-footer a:focus-visible, .pkf-footer button:focus-visible, .pkf-hero--bg a:focus-visible, .pkf-section--dark a:focus-visible, .pkf-section--image a:focus-visible { outline-color: var(--pkf-bg); } img { max-width: 100%; height: auto; display: block; } /* Visually hidden (screen-reader only) - icon captions, table captions. */ .pkf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip link - keyboard users jump past nav. First element in . */ .pkf-skip-link { position: absolute; left: 16px; top: -64px; z-index: 100; font-family: var(--pkf-font-accent); font-size: var(--pkf-small); font-weight: 700; text-decoration: none; background: var(--pkf-bg); color: var(--pkf-ink); padding: 12px 20px; border-radius: var(--pkf-radius-form); } .pkf-skip-link:focus-visible { top: 8px; } /* Inline SVG icons (stroke/fill use currentColor; source: assets/icons/). */ .pkf-icon { width: var(--pkf-icon); height: var(--pkf-icon); flex: none; } .pkf-icon--sm { width: var(--pkf-icon-sm); height: var(--pkf-icon-sm); flex: none; } /* Text link with arrow icon (replaces bare arrow glyphs). */ .pkf-arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; } .pkf-arrow-link svg { width: var(--pkf-icon-sm); height: var(--pkf-icon-sm); flex: none; transition: transform var(--pkf-duration) var(--pkf-ease); } .pkf-arrow-link:hover svg { transform: translateX(4px); } .pkf-container { max-width: var(--pkf-container); margin-inline: auto; padding-inline: var(--pkf-gutter); } .pkf-section { padding-block: var(--pkf-s8); } .pkf-section--alt { background: var(--pkf-bg-alt); } /* Full-width dark band (process section) - white text, red accents. */ .pkf-section--dark { background: var(--pkf-navy); color: var(--pkf-bg); } .pkf-section--dark .pkf-eyebrow, .pkf-section--dark .pkf-section__title { color: var(--pkf-bg); } .pkf-section--dark .pkf-section__lead { color: var(--pkf-bg); opacity: 0.8; } .pkf-section--dark .pkf-process__steps li { border-top-color: var(--pkf-red); color: var(--pkf-bg); } .pkf-section--dark .pkf-process__steps strong { color: var(--pkf-bg); } /* Full-width image band (process section) - photo + dark overlay, white text/dividers/numbers, vertically centered content. */ .pkf-section--image { background-image: var(--pkf-hero-overlay), url("../assets/img/pkf-hero-gedung-kaca-1600w.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--pkf-bg); min-height: var(--pkf-band-min-h); display: flex; align-items: center; } .pkf-section--image > .pkf-container { width: 100%; } .pkf-section--image .pkf-eyebrow, .pkf-section--image .pkf-section__title { color: var(--pkf-bg); } .pkf-section--image .pkf-section__lead { color: var(--pkf-bg); opacity: 0.85; } .pkf-section--image .pkf-process__steps li { border-top-color: var(--pkf-bg); color: var(--pkf-bg); } .pkf-section--image .pkf-process__steps li::before { color: var(--pkf-bg); } .pkf-section--image .pkf-process__steps strong { color: var(--pkf-bg); } .pkf-eyebrow { font-family: var(--pkf-font-accent); font-size: var(--pkf-small); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pkf-red); margin-bottom: var(--pkf-s2); } /* Section H2s are ink (audit 07: all-red titles killed the accent function). Red stays for eyebrow, hover, and key highlights only. Dark panels (.pkf-cta, .pkf-footer, .pkf-section--dark) override to white. */ .pkf-section__title { margin-bottom: var(--pkf-s2); color: var(--pkf-ink); } .pkf-section__lead { color: var(--pkf-muted); font-size: var(--pkf-body); max-width: 720px; margin-bottom: var(--pkf-s4); } /* Buttons - measured from inspiration (2026-09-12): card "Baca Selengkapnya"/"Hubungi Kami": black pill, Poppins, uppercase, radius 500px, padding 10px 17px. Outline ("BOOK NOW"/"KONSULTASI" style): unified to the same pill Poppins system per audit 07 (inspiration measured Oswald square - dropped to keep one decision-group style site-wide). Hierarchy (one primary action per view, Apple HIG): conversion buttons (WA / contact CTAs) are RED pills; exploration links ("Baca Selengkapnya", "Lihat semua ...") stay BLACK pills. WA green is reserved for the floating button. */ .pkf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-family: var(--pkf-font-accent); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 12px 24px; border-radius: var(--pkf-radius-btn); border: 1px solid var(--pkf-black); cursor: pointer; transition: background-color var(--pkf-duration) var(--pkf-ease), color var(--pkf-duration) var(--pkf-ease), border-color var(--pkf-duration) var(--pkf-ease), transform var(--pkf-duration) var(--pkf-ease), box-shadow var(--pkf-duration) var(--pkf-ease); } .pkf-btn:hover { transform: translateY(-1px); } .pkf-btn:active { transform: translateY(0) scale(0.98); } .pkf-btn svg { width: var(--pkf-icon-sm); height: var(--pkf-icon-sm); flex: none; } /* Conversion buttons - ONE red style, two semantic names. --primary: non-WA conversions (form submit, header/hero/CTA panels). --wa: WA-prefill links (cards, articles, floats wiring). Same red pill, same hover; separate classes so Elementor mapping stays semantic (Button widget vs WA-link). White text passes 4.5:1 on --pkf-red; hover deepens to --pkf-red-dark. */ .pkf-btn--primary, .pkf-btn--wa { background: var(--pkf-red); border-color: var(--pkf-red); color: var(--pkf-bg); } .pkf-btn--primary:hover, .pkf-btn--wa:hover { background: var(--pkf-red-dark); border-color: var(--pkf-red-dark); color: var(--pkf-bg); } /* Light variant - for dark panels (.pkf-cta) as the SECONDARY action. The PRIMARY conversion button on dark panels is --primary (red); --light stays white so the two never compete. */ .pkf-btn--light { background: var(--pkf-bg); border-color: var(--pkf-bg); color: var(--pkf-ink); } .pkf-btn--light:hover { background: var(--pkf-bg-alt); border-color: var(--pkf-bg-alt); color: var(--pkf-ink); } /* Ghost-light - secondary outline on dark panels (transparent fill, white border/text; fills white on hover). Never combined with --primary/--wa (a button is either solid red OR outline, not both). */ .pkf-btn--ghost-light { border-color: var(--pkf-bg); color: var(--pkf-bg); background: transparent; } .pkf-btn--ghost-light:hover { background: var(--pkf-bg); border-color: var(--pkf-bg); color: var(--pkf-ink); } /* Explorer - black pill for non-conversion links ("Baca Selengkapnya"). Keeps conversion red exclusive to WA/contact actions. */ .pkf-btn--explorer { background: var(--pkf-black); border-color: var(--pkf-black); color: var(--pkf-bg); } .pkf-btn--explorer:hover { background: var(--pkf-navy-light); border-color: var(--pkf-navy-light); color: var(--pkf-bg); } /* Ghost - outline on light panels (transparent fill, ink border/text). */ .pkf-btn--ghost { border-color: var(--pkf-ink); color: var(--pkf-ink); background: transparent; } .pkf-btn--ghost:hover { background: var(--pkf-ink); color: var(--pkf-bg); } /* Small card buttons - inspiration renders "Baca Selengkapnya" / "Hubungi Kami" as compact black pills. */ .pkf-btn--sm { font-size: 10px; padding: 10px 17px; } /* Forms (contact page; replaced by Elementor Form in phase 2) */ .pkf-form label { display: block; font-weight: 700; font-size: var(--pkf-small); margin-bottom: var(--pkf-s1); } .pkf-form input, .pkf-form select, .pkf-form textarea { width: 100%; font-family: var(--pkf-font-body); font-size: var(--pkf-body); padding: 12px 14px; border: 1px solid var(--pkf-line); border-radius: var(--pkf-radius-form); background: var(--pkf-bg); color: var(--pkf-ink); margin-bottom: var(--pkf-s2); min-height: 44px; } .pkf-form input:focus, .pkf-form select:focus, .pkf-form textarea:focus { border-color: var(--pkf-red); } .pkf-form__hint { font-size: var(--pkf-small); color: var(--pkf-muted); margin-top: calc(-1 * var(--pkf-s1)); margin-bottom: var(--pkf-s2); } /* Tablet */ @media (max-width: 1024px) { :root { --pkf-h1: 40px; --pkf-h2: 28px; } .pkf-section { padding-block: var(--pkf-s6); } } /* Mobile */ @media (max-width: 767px) { :root { --pkf-h1: 32px; --pkf-h2: 24px; --pkf-h3: 20px; --pkf-h4: 17px; --pkf-body: 15px; --pkf-small: 13px; } .pkf-section { padding-block: var(--pkf-s5); } .pkf-btn { display: flex; width: 100%; } } /* OS reduced-motion setting - not a layout breakpoint, no layout change. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none; animation: none; } }