/* ============================================================ HouseKraft — Redesign Layer (assets/hk-redesign.css) Higher contrast + Apple-esque polish. Theme preserved. Load this LAST in so it enhances the base styles. Safe by design: no layout restructuring, only tokens + polish. ============================================================ */ /* ---- Tokens: stronger, higher-contrast text (headings & body) ---- */ :root{ --color-text: #201B12; /* near-black — important text pops */ --color-text-muted: #655C4E; /* darker muted — readable, not washed out */ --hk-shadow-sm: 0 2px 10px rgba(32,27,18,0.06); --hk-shadow-md: 0 10px 30px rgba(32,27,18,0.10); --hk-shadow-lg: 0 20px 50px rgba(32,27,18,0.14); --hk-ease: cubic-bezier(.2,.7,.2,1); } /* ---- Global rendering + rhythm (Apple-esque crispness) ---- */ html{ scroll-behavior:smooth; } body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; letter-spacing:-0.011em; } ::selection{ background:rgba(200,144,62,0.24); color:#1A1814; } :focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; border-radius:8px; } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation-duration:.01ms!important;transition-duration:.01ms!important;} } /* ---- Headings: tighter tracking, stronger presence ---- */ h1,h2,h3,.section-title,.hero h1{ letter-spacing:-0.022em; } /* ---- Primary buttons: gold + dark ink = high contrast (~6:1), premium ---- */ .btn-primary{ color:#1A1814; font-weight:700; border-radius:100px; box-shadow:0 6px 18px rgba(200,144,62,0.30); transition:transform .22s var(--hk-ease), box-shadow .22s var(--hk-ease), background .22s var(--hk-ease), color .22s var(--hk-ease); } .btn-primary:hover{ color:#12100C; transform:translateY(-2px); box-shadow:0 12px 30px rgba(200,144,62,0.42); } .btn-primary svg{ stroke:currentColor; } .btn-lg{ padding:15px 34px; font-size:1.02rem; } /* ---- Secondary buttons: bolder, crisper (keeps section-specific colors) ---- */ .btn-secondary{ font-weight:700; border-width:1.5px; transition:transform .22s var(--hk-ease), border-color .2s, color .2s, background .2s; } .btn-secondary:hover{ transform:translateY(-2px); } /* ---- Cards: larger radius, layered depth, smooth lift ---- */ .feature-card,.pro-card,.step-card,.more-card,.validation-point,.team-card, .benefit-card,.use-case-card,.uc-card,.device-card{ border-radius:20px; transition:transform .28s var(--hk-ease), box-shadow .28s var(--hk-ease), border-color .28s var(--hk-ease); } .feature-card:hover,.pro-card:hover,.more-card:hover,.team-card:hover,.benefit-card:hover{ transform:translateY(-4px); box-shadow:var(--hk-shadow-md); } /* ---- Pills / tags: crisper weight ---- */ .feature-tag,.cs-tag,.more-tag,.hero-badge,.section-eyebrow,.eyebrow{ font-weight:700; } /* ---- Frosted, sticky navigation (Apple hallmark) ---- */ nav{ position:sticky; top:0; z-index:1000; background:rgba(253,251,247,0.72); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid rgba(32,27,18,0.07); transition:box-shadow .25s var(--hk-ease); } nav:hover{ box-shadow:var(--hk-shadow-sm); } /* ---- Inline links in prose: gold, subtle underline ---- */ .page-content a:not(.btn-primary):not(.btn-secondary):not(.btn-dark), .footer-col ul a{ transition:color .18s ease; } /* ---- Section titles a touch larger for hierarchy ---- */ .section-title{ line-height:1.1; } /* ---- Images render smoothly ---- */ img{ } /* ============================================================ Shared components (founder strip + savings) — usable on any page ============================================================ */ .founder-strip{ background:var(--color-bg-dark); color:#fff; padding:48px 24px; } .founder-strip-inner{ max-width:1080px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; } .founder-strip-text h2{ font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,1.9rem); margin-bottom:8px; color:#fff; } .founder-strip-text p{ color:rgba(255,255,255,0.74); font-size:0.98rem; line-height:1.6; max-width:560px; } .founder-strip-ctas{ display:flex; gap:12px; flex-wrap:wrap; } .founder-strip-ctas .btn-secondary{ border-color:rgba(255,255,255,0.4); color:#fff; } .founder-strip-ctas .btn-secondary:hover{ border-color:var(--color-accent); color:var(--color-accent); background:rgba(255,255,255,0.06); } @media (max-width:760px){ .founder-strip-inner{ flex-direction:column; align-items:flex-start; } .founder-strip-ctas .btn-primary, .founder-strip-ctas .btn-secondary{ width:100%; justify-content:center; } } .savings-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .savings-col{ background:var(--color-white); border:1px solid var(--color-border); border-radius:20px; padding:30px; } .savings-col h3{ font-family:var(--font-display); font-size:1.25rem; margin-bottom:16px; } .savings-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:13px; } .savings-col li{ position:relative; padding-left:28px; font-size:0.93rem; color:var(--color-text-muted); line-height:1.55; } .savings-col li::before{ content:'✓'; position:absolute; left:0; top:0; color:var(--color-green,#2D9F6F); font-weight:700; } .savings-col li strong{ color:var(--color-text); font-weight:600; } @media (max-width:700px){ .savings-grid{ grid-template-columns:1fr; } } /* Walkthrough / tutorial CTA (works on light or dark sections) */ .walkthrough-cta{ display:flex; gap:14px 18px; align-items:center; justify-content:center; flex-wrap:wrap; margin:48px auto; padding:0 24px; max-width:780px; text-align:center; } .walkthrough-cta span{ color:inherit; opacity:0.92; font-weight:600; font-size:0.98rem; } @media (max-width:560px){ .walkthrough-cta .btn-primary{ width:100%; justify-content:center; } }