/* ============================================================ PICKABOO — SHARED STYLES Hand-written replacement for the Tailwind CDN build, shared by pickaboo.html, pickaboo-privacy.html and pickaboo-support.html. "Milled aluminum / guitar-pedal" hardware aesthetic. Fonts (Hanken Grotesk, JetBrains Mono, Material Symbols) are still loaded from Google Fonts via in each page's . Breakpoints match Tailwind: sm=640px, md=768px. Corner-radius note: the landing page (pk-body) uses the tighter hardware radii from its original Tailwind config (pills 12px, panels 8px); the secondary pages add .pk-alt to restore the Tailwind-default radii they were built with (pills fully round, panels 12px). Driven by the two vars below. ============================================================ */ :root { --pk-primary: #e9c176; --pk-on-primary: #412d00; --pk-on-surface: #e5e2e1; --pk-on-surface-variant: #d1c5b4; --pk-surface: #131313; --pk-sc-lowest: #0e0e0e; --pk-sc-low: #1c1b1b; --pk-sc: #201f1f; --pk-sc-high: #2a2a2a; --pk-sc-highest: #353534; --pk-surface-variant: #353534; --pk-tertiary: #00e639; --pk-amber: #FFBF00; --pk-green: #00FF41; --pk-milled: #344155; --pk-charcoal: #121212; --pk-signal-dead: #1A1A1A; --pk-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; --pk-mono: "JetBrains Mono", ui-monospace, monospace; --pk-inset: inset 4px 4px 8px rgba(0,0,0,.6), inset -2px -2px 4px rgba(255,255,255,.05); --pk-outset: 4px 4px 8px rgba(0,0,0,.6), -2px -2px 4px rgba(255,255,255,.05); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } .pk-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--pk-surface); color: var(--pk-on-surface); font-family: var(--pk-display); background-image: linear-gradient(to right, var(--pk-sc-low) 1px, transparent 1px), linear-gradient(to bottom, var(--pk-sc-low) 1px, transparent 1px); background-size: 24px 24px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* hardware radii (landing page) */ --pk-r-pill: 12px; --pk-r-panel: 8px; } .pk-body.pk-alt { /* Tailwind-default radii (secondary pages) */ --pk-r-pill: 9999px; --pk-r-panel: 12px; } /* :where() keeps these element resets at zero specificity, the way Tailwind's Preflight did. Written plainly (.pk-body a { … }) they score (0,1,1) and silently outrank every single-class rule below. */ :where(.pk-body) :where(img) { display: block; max-width: 100%; } :where(.pk-body) :where(a) { color: inherit; text-decoration: none; } :where(.pk-body) :where(h1, h2, h3, p) { margin: 0; } :where(.pk-body) :where(ul, ol) { margin: 0; } :where(.pk-body) :where(button) { font-family: inherit; background: none; border: none; padding: 0; cursor: pointer; color: inherit; } .pk-main { flex: 1 0 auto; } /* ---------- Effect helpers ---------- */ .pk-milled-inset { box-shadow: var(--pk-inset); } .pk-milled-outset { box-shadow: var(--pk-outset); } .pk-led-amber { box-shadow: 0 0 12px rgba(255,191,0,.4); } .pk-led-green { box-shadow: 0 0 12px rgba(0,255,65,.4); } .pk-glass { background: rgba(32,31,31,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(233,193,118,.1); } .pk-squishy:active { transform: scale(0.95); transition: transform 0.15s ease-in-out; } @keyframes pk-pulse-glow { 0%, 100% { opacity: .8; } 50% { opacity: 1; box-shadow: 0 0 20px rgba(0,255,65,.6); } } .pk-pulse-green { animation: pk-pulse-glow 2s ease-in-out infinite; } /* ---------- Small utilities ---------- */ .pk-hidden { display: none; } .pk-shrink0 { flex-shrink: 0; } .pk-nowrap { white-space: nowrap; } .pk-mono { font-family: var(--pk-mono); } .pk-t-primary { color: var(--pk-primary); } .pk-t-tertiary { color: var(--pk-tertiary); } .pk-t-amber { color: var(--pk-amber); } .pk-t-variant { color: var(--pk-on-surface-variant); } .pk-t-onsurface { color: var(--pk-on-surface); } .pk-mt-1 { margin-top: 0.25rem; } .pk-mt-2 { margin-top: 0.5rem; } .pk-mt-4 { margin-top: 1rem; } .pk-mb-4 { margin-bottom: 1rem; } .pk-mb-6 { margin-bottom: 1.5rem; } .pk-mb-8 { margin-bottom: 2rem; } .pk-mb-10 { margin-bottom: 2.5rem; } .pk-mb-12 { margin-bottom: 3rem; } .pk-mb-16 { margin-bottom: 4rem; } /* Material Symbols size overrides (base size comes from Google's CSS) */ .pk-ico-xs { font-size: 14px; } .pk-ico-sm { font-size: 16px; } .pk-ico-18 { font-size: 18px; } .pk-ico-xl { font-size: 20px; } .pk-ico-svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } /* Mono uppercase caption label (12px / .1em / 700) */ .pk-label { font-family: var(--pk-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; } /* ---------- Layout containers ---------- */ .pk-container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; width: 100%; } .pk-container--narrow { max-width: 48rem; } /* ============================================================ HEADER / NAV ============================================================ */ .pk-header { position: sticky; top: 0; z-index: 50; background: rgba(19,19,19,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--pk-milled); } .pk-header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 80rem; margin: 0 auto; padding: 1rem 1.5rem; } .pk-header-left { display: flex; align-items: center; gap: 1rem; } .pk-back { display: none; align-items: center; gap: 0.375rem; color: var(--pk-on-surface-variant); font-size: 0.875rem; font-weight: 600; transition: color 0.2s; } .pk-back:hover { color: var(--pk-primary); } .pk-vdivider { width: 1px; height: 1.25rem; background: var(--pk-milled); display: none; } .pk-brand { display: flex; align-items: center; gap: 0.625rem; } .pk-brand-icon { width: 2rem; height: 2rem; border-radius: 22%; } .pk-brand-name { font-family: var(--pk-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.05em; color: var(--pk-primary); } .pk-header-right { display: flex; align-items: center; gap: 0.25rem; } .pk-nav { display: none; gap: 0.25rem; align-items: center; } .pk-navlink { color: var(--pk-on-surface-variant); padding: 0.25rem 0.5rem; border-radius: 4px; transition: color 0.2s, background-color 0.2s; } .pk-navlink:hover { color: var(--pk-primary); background: var(--pk-sc-high); } .pk-navlink.is-active { color: var(--pk-primary); font-weight: 700; background: none; border-radius: 0; border-bottom: 2px solid var(--pk-primary); padding-bottom: 0.125rem; } .pk-menu-toggle { display: inline-flex; color: var(--pk-primary); } .pk-mobile-nav { border-top: 1px solid var(--pk-milled); background: var(--pk-sc-lowest); } .pk-mobile-nav-inner { display: flex; flex-direction: column; padding: 1rem 1.5rem; gap: 0.75rem; } .pk-mobile-nav-inner a { color: var(--pk-on-surface-variant); } .pk-mobile-nav-inner a.is-active { color: var(--pk-primary); } @media (min-width: 768px) { .pk-back { display: inline-flex; } .pk-vdivider { display: block; } .pk-nav { display: flex; } .pk-menu-toggle { display: none; } .pk-mobile-nav { display: none !important; } } /* ============================================================ BADGES / PILLS ============================================================ */ .pk-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: var(--pk-r-pill); border: 1px solid var(--pk-milled); background: var(--pk-sc); width: fit-content; } .pk-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; } .pk-dot--amber { background: var(--pk-amber); box-shadow: 0 0 12px rgba(255,191,0,.4); } .pk-dot--green { background: var(--pk-tertiary); box-shadow: 0 0 12px rgba(0,255,65,.4); } .pk-badge-label { letter-spacing: 0.1em; } /* ============================================================ CALL-TO-ACTION BUTTONS ============================================================ */ .pk-cta { display: inline-flex; align-items: center; gap: 0.75rem; background: var(--pk-primary); color: var(--pk-on-primary); border-radius: var(--pk-r-pill); font-weight: 700; transition: filter 0.2s; } .pk-cta:hover { filter: brightness(1.1); } .pk-cta--lg { padding: 1rem 2rem; font-size: 1.125rem; } .pk-cta--store { padding: 1rem 2rem; gap: 1rem; } .pk-cta--sm { padding: 0.75rem 1.5rem; gap: 0.5rem; font-size: 0.875rem; } .pk-cta-ios { font-family: var(--pk-mono); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; opacity: 0.7; } .pk-cta-divider { width: 1px; height: 1.25rem; background: rgba(65,45,0,.3); } .pk-cta-store-label { font-family: var(--pk-display); font-weight: 700; font-size: 1.125rem; } /* ============================================================ SECTION HEADINGS (left accent bar) ============================================================ */ .pk-sechead { border-left: 4px solid var(--pk-primary); padding-left: 1rem; } .pk-sechead--tertiary { border-left-color: var(--pk-tertiary); } .pk-h-headline-lg { font-family: var(--pk-display); font-size: 32px; line-height: 40px; letter-spacing: -0.02em; font-weight: 700; color: var(--pk-on-surface); } .pk-h-xl { font-family: var(--pk-display); font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--pk-on-surface); } .pk-sechead-sub { font-family: var(--pk-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; color: var(--pk-on-surface-variant); opacity: 0.5; margin-top: 0.5rem; } /* ============================================================ HERO (landing) ============================================================ */ .pk-hero { position: relative; padding: 7rem 0 6rem; overflow: hidden; border-bottom: 1px solid var(--pk-milled); } .pk-hero-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } .pk-hero-copy { display: flex; flex-direction: column; gap: 1.5rem; position: relative; z-index: 10; } .pk-hero-title { font-family: var(--pk-display); font-weight: 800; color: var(--pk-on-surface); line-height: 1; letter-spacing: -0.02em; font-size: clamp(48px, 8vw, 72px); } .pk-hero-title .pk-accent { color: var(--pk-tertiary); } .pk-hero-lead { font-family: var(--pk-display); color: var(--pk-on-surface-variant); max-width: 28rem; font-size: 1.125rem; line-height: 1.75rem; } .pk-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; } .pk-hero-links { font-family: var(--pk-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pk-on-surface-variant); opacity: 0.4; margin-top: 0.5rem; } .pk-hero-links a { transition: color 0.2s; } .pk-hero-links a:hover { color: var(--pk-amber); } .pk-hero-device { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 3rem; } .pk-phone { background: var(--pk-sc-lowest); border: 4px solid var(--pk-sc); padding: 0.5rem; position: relative; box-shadow: var(--pk-outset), 0 25px 50px -12px rgba(0,0,0,.25); } .pk-phone-screen { width: 100%; height: 100%; background: var(--pk-charcoal); position: relative; overflow: hidden; border: 1px solid var(--pk-milled); box-shadow: var(--pk-inset); } .pk-phone-video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Ambient pointer glow */ .pk-cursor-glow { position: fixed; top: 0; left: 0; width: 9rem; height: 9rem; border-radius: 9999px; background: rgba(255,191,0,.15); filter: blur(64px); pointer-events: none; opacity: 0; transition: opacity 0.3s; z-index: 0; } .pk-cursor-glow.is-green { background: rgba(0,255,65,.15); } @media (min-width: 768px) { .pk-hero-grid { grid-template-columns: 1fr 1fr; } .pk-hero-device { margin-top: 0; } } /* ============================================================ FEATURES BENTO (landing) ============================================================ */ .pk-features { padding: 6rem 0; background: var(--pk-sc-lowest); border-bottom: 1px solid var(--pk-milled); } .pk-bento { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .pk-bento-card { position: relative; overflow: hidden; border-radius: 8px; padding: 2rem; } .pk-bento-card--glass { background: rgba(32,31,31,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(233,193,118,.1); box-shadow: var(--pk-inset); } .pk-bento-card--solid { background: var(--pk-sc); border: 1px solid var(--pk-milled); } .pk-bento-card--col { display: flex; flex-direction: column; justify-content: space-between; } .pk-bento-card--pedalcard:hover { border-color: rgba(233,193,118,.3); } .pk-bento-num { position: absolute; top: 1rem; right: 1rem; font-family: var(--pk-mono); font-size: 2.25rem; line-height: 1; font-weight: 700; color: var(--pk-milled); opacity: 0.2; } .pk-bento-icon { width: 3rem; height: 3rem; background: var(--pk-sc-highest); border-radius: 4px; border: 1px solid var(--pk-milled); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; box-shadow: var(--pk-outset); } .pk-bento-card h3 { font-family: var(--pk-display); font-weight: 700; font-size: 24px; line-height: 32px; color: var(--pk-on-surface); margin-bottom: 0.75rem; } .pk-bento-card p { font-family: var(--pk-display); font-size: 16px; line-height: 24px; color: var(--pk-on-surface-variant); } .pk-bento-card p.pk-maxw-md { max-width: 28rem; } .pk-bento-split { display: flex; flex-direction: column; gap: 2rem; align-items: center; height: 100%; } .pk-bento-split-main { flex: 1; } /* Simulated pedal button (card 01) */ .pk-pedal { width: 4rem; height: 4rem; border-radius: var(--pk-r-pill); background: var(--pk-sc); border: 4px solid var(--pk-charcoal); margin: 2rem auto 0; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--pk-outset); transition: box-shadow 0.3s; } .pk-pedal:active { box-shadow: var(--pk-inset); } .pk-bento-card--pedalcard:hover .pk-pedal { box-shadow: 0 0 15px rgba(233,193,118,.2); } .pk-pedal-dot { width: 1rem; height: 1rem; border-radius: 9999px; background: var(--pk-signal-dead); transition: background-color 0.3s, box-shadow 0.3s; } .pk-bento-card--pedalcard:hover .pk-pedal-dot { background: var(--pk-amber); box-shadow: 0 0 12px rgba(255,191,0,.4); } /* Frequency readout (card 02) */ .pk-freq { background: var(--pk-charcoal); padding: 1rem; border-radius: 2px; border: 1px solid var(--pk-milled); box-shadow: var(--pk-inset); font-family: var(--pk-mono); color: var(--pk-tertiary); display: flex; justify-content: space-between; align-items: center; text-align: center; } .pk-freq-col { display: flex; flex-direction: column; align-items: center; } .pk-freq-num { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.05em; } .pk-freq-unit { font-size: 0.75rem; text-transform: uppercase; color: var(--pk-on-surface-variant); } .pk-freq-side { opacity: 0.5; font-size: 0.875rem; } /* Metronome readout (card 03) */ .pk-metro { display: flex; justify-content: space-between; align-items: center; background: var(--pk-charcoal); padding: 0.75rem; border-radius: 2px; box-shadow: var(--pk-inset); } .pk-metro-bpm { color: var(--pk-amber); font-family: var(--pk-mono); font-weight: 700; font-size: 1.25rem; } .pk-metro-dots { display: flex; gap: 0.5rem; } .pk-metro-dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; background: var(--pk-surface-variant); } .pk-metro-dot--on { background: var(--pk-amber); box-shadow: 0 0 12px rgba(255,191,0,.4); } /* Instrument chips (card 04) */ .pk-inst-grid { flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .pk-chip { padding: 0.5rem 1rem; background: var(--pk-sc); border: 1px solid var(--pk-milled); color: var(--pk-on-surface-variant); font-family: var(--pk-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; border-radius: 2px; text-align: center; } .pk-chip--active { border-color: var(--pk-primary); color: var(--pk-primary); box-shadow: 0 0 12px rgba(255,191,0,.4); opacity: 0.8; } @media (min-width: 768px) { .pk-bento { grid-template-columns: repeat(12, 1fr); } .pk-col-7 { grid-column: span 7; } .pk-col-5 { grid-column: span 5; } .pk-bento-split { flex-direction: row; } } /* ============================================================ SCREENSHOTS (landing) ============================================================ */ .pk-screens { padding: 6rem 0; border-bottom: 1px solid var(--pk-milled); } .pk-shots { overflow-x: auto; padding: 0 1.5rem 1rem; margin: 0 -1.5rem; } .pk-shots-track { display: flex; gap: 1rem; width: max-content; } .pk-shot { width: 10rem; height: 340px; border-radius: 16px; overflow: hidden; border: 1px solid var(--pk-milled); background: var(--pk-charcoal); flex-shrink: 0; box-shadow: var(--pk-outset); } .pk-shot img { width: 100%; height: 100%; object-fit: cover; } .pk-shots::-webkit-scrollbar { height: 4px; } .pk-shots::-webkit-scrollbar-track { background: #0e0e0e; } .pk-shots::-webkit-scrollbar-thumb { background: #344155; border-radius: 2px; } /* ============================================================ CTA SECTION (landing) ============================================================ */ .pk-cta-section { padding: 6rem 0; background: var(--pk-sc-lowest); } .pk-cta-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .pk-cta-title { font-family: var(--pk-display); font-weight: 800; color: var(--pk-on-surface); letter-spacing: -0.02em; font-size: clamp(36px, 6vw, 56px); } .pk-cta-lead { font-family: var(--pk-display); font-size: 16px; line-height: 24px; color: var(--pk-on-surface-variant); max-width: 28rem; } /* ============================================================ PAGE HEADER (secondary pages) ============================================================ */ .pk-pagehead { padding: 5rem 0 3rem; border-bottom: 1px solid var(--pk-milled); } .pk-pagehead h1 { font-family: var(--pk-display); font-weight: 800; color: var(--pk-on-surface); letter-spacing: -0.02em; font-size: clamp(32px, 5vw, 48px); margin-bottom: 0.75rem; } .pk-pagehead-meta { font-family: var(--pk-mono); font-size: 0.875rem; color: var(--pk-on-surface-variant); opacity: 0.5; text-transform: uppercase; letter-spacing: 0.1em; } .pk-pagehead-lead { color: var(--pk-on-surface-variant); font-size: 1.125rem; line-height: 1.75rem; } /* ============================================================ PANELS + PROSE (privacy) ============================================================ */ .pk-content { padding: 4rem 0; } .pk-panel { background: rgba(32,31,31,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(233,193,118,.1); box-shadow: var(--pk-inset); border-radius: var(--pk-r-panel); padding: 2rem; } .pk-panel--sm { padding: 1.5rem; } .pk-prose h2 { font-family: var(--pk-display); font-size: 1.1rem; font-weight: 700; color: var(--pk-primary); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2.5rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--pk-milled); } .pk-prose h3 { font-family: var(--pk-mono); font-size: 0.85rem; font-weight: 700; color: var(--pk-on-surface-variant); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 1.5rem; margin-bottom: 0.5rem; } .pk-prose p { color: var(--pk-on-surface-variant); line-height: 1.75; margin-bottom: 0.75rem; } .pk-prose ul, .pk-prose ol { color: var(--pk-on-surface-variant); line-height: 1.75; padding-left: 1.25rem; margin-bottom: 0.75rem; } .pk-prose li { margin-bottom: 0.35rem; } .pk-prose ul li { list-style-type: disc; } .pk-prose ol li { list-style-type: decimal; } .pk-prose strong { color: var(--pk-on-surface); font-weight: 600; } .pk-prose a { color: var(--pk-primary); text-decoration: underline; text-underline-offset: 3px; } .pk-prose a:hover { color: var(--pk-amber); } /* ============================================================ SUPPORT PAGE ============================================================ */ .pk-support-about { padding: 4rem 0; border-bottom: 1px solid var(--pk-milled); } .pk-support-about-inner { display: flex; flex-direction: column; gap: 1.5rem; } .pk-body-text { color: var(--pk-on-surface-variant); line-height: 1.625; } .pk-feature-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 0.5rem; } .pk-feature-item { display: flex; align-items: center; gap: 0.75rem; background: var(--pk-sc); border-radius: 8px; padding: 0.75rem 1rem; border: 1px solid var(--pk-milled); } .pk-feature-text { color: var(--pk-on-surface-variant); font-size: 0.875rem; } .pk-faq { padding: 4rem 0; border-bottom: 1px solid var(--pk-milled); } .pk-faq-list { display: flex; flex-direction: column; gap: 1rem; } .pk-faq-q { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; } .pk-faq-q-label { font-family: var(--pk-mono); font-size: 12px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; color: var(--pk-primary); opacity: 0.6; padding-top: 0.125rem; } .pk-faq-question { font-family: var(--pk-display); font-weight: 700; color: var(--pk-on-surface); } .pk-faq-answer { color: var(--pk-on-surface-variant); line-height: 1.625; padding-left: 1rem; } ul.pk-faq-answer, ol.pk-faq-answer { padding-left: 1rem; } ul.pk-faq-answer li, ol.pk-faq-answer li { margin-bottom: 0.375rem; } ul.pk-faq-answer li { list-style-type: disc; } ol.pk-faq-answer li { list-style-type: decimal; } .pk-support-contact { padding: 4rem 0; } .pk-contact-card { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; justify-content: space-between; } .pk-contact-title { color: var(--pk-on-surface); font-weight: 700; margin-bottom: 0.25rem; } .pk-contact-desc { color: var(--pk-on-surface-variant); font-size: 0.875rem; } @media (min-width: 640px) { .pk-feature-grid { grid-template-columns: 1fr 1fr; } .pk-contact-card { flex-direction: row; align-items: center; } } /* ============================================================ FOOTER ============================================================ */ .pk-footer { background: var(--pk-sc-lowest); border-top: 1px solid var(--pk-milled); } .pk-footer-inner { display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; max-width: 80rem; margin: 0 auto; padding: 3rem 1.5rem; } .pk-footer-name { font-family: var(--pk-display); font-size: 1.5rem; font-weight: 900; color: var(--pk-on-surface-variant); letter-spacing: -0.05em; margin-bottom: 0.5rem; } .pk-footer-copy { font-family: var(--pk-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pk-on-surface-variant); opacity: 0.4; margin-bottom: 0.25rem; } .pk-footer-site { font-family: var(--pk-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pk-on-surface-variant); opacity: 0.4; transition: color 0.2s, opacity 0.2s; } .pk-footer-site:hover { color: var(--pk-amber); opacity: 1; } .pk-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .pk-footer-links a { color: var(--pk-on-surface-variant); transition: color 0.2s; } .pk-footer-links a:hover { color: var(--pk-amber); } .pk-footer-links a.is-active { color: var(--pk-primary); } @media (min-width: 768px) { .pk-footer-inner { grid-template-columns: 1fr 1fr; } .pk-footer-links { justify-content: flex-end; } }