/* Adsprint Studio — burnt orange & vanilla colorway. Light = vanilla base; dark = cocoa base. Theme is set as data-theme="light|dark" on by the inline script in each page (before first paint), toggled by the nav button, stored in localStorage. */ :root { --bg: #FFF4D6; --surface: #FFFBEF; --surface-2: #FFF8E3; --text: #2B1A0E; --text-muted: #6B5540; --border: #EAD9B8; --accent: #FC6C26; --brand: #FC6C26; --on-accent: #2B1A0E; /* Derived: accent used AS TEXT needs more contrast on vanilla. */ --accent-text: #C14A10; --accent-soft: rgba(252, 108, 38, 0.12); --good: #1E7F4F; --nav-bg: rgba(255, 244, 214, 0.85); --mono: "IBM Plex Mono", ui-monospace, monospace; } [data-theme="dark"] { --bg: #1C120B; --surface: #2A1B10; --surface-2: #382413; --text: #FFF4D6; --text-muted: #CBB18F; --border: #4A3212; --accent: #FC6C26; --brand: #FF8547; --on-accent: #1C120B; --accent-text: #FF8547; --accent-soft: rgba(252, 108, 38, 0.14); --good: #3ECF8E; --nav-bg: rgba(28, 18, 11, 0.85); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: "Space Grotesk", system-ui, -apple-system, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; } .wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; } /* ---- nav ---- */ nav { position: sticky; top: 0; z-index: 10; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .logo { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; text-decoration: none; display: flex; align-items: center; gap: 10px; } .logo .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(252, 108, 38, 0.8); } .nav-links { display: flex; gap: 24px; align-items: center; } .nav-links a { text-decoration: none; color: var(--text-muted); font-size: 0.92rem; transition: color 0.15s; } .nav-links a:hover { color: var(--text); } /* .nav-links a outranks .btn on specificity, so the nav CTA needs its button colors restated or it inherits the muted link color. */ .nav-links a.btn, .nav-links a.btn:hover { color: var(--on-accent); } .nav-links a.lang { font-family: var(--mono); font-size: 0.8rem; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; } .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 0.95rem; padding: 3px 9px; line-height: 1.4; } .theme-toggle:hover { color: var(--text); border-color: var(--text-muted); } .btn { display: inline-block; text-decoration: none; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 0.95rem; padding: 10px 20px; border-radius: 8px; transition: transform 0.12s, box-shadow 0.12s; } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(252, 108, 38, 0.35); } .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn.ghost:hover { border-color: var(--text-muted); box-shadow: none; } /* ---- hero ---- */ header { padding: 96px 0 80px; position: relative; overflow: hidden; } header::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 75% 10%, rgba(252, 108, 38, 0.10), transparent 70%), radial-gradient(500px 400px at 15% 80%, rgba(120, 180, 120, 0.06), transparent 70%); pointer-events: none; } .kicker { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 20px; } h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; max-width: 720px; } h1 em { font-style: normal; color: var(--accent-text); } .sub { margin-top: 22px; font-size: 1.15rem; color: var(--text-muted); max-width: 620px; } .hero-ctas { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; } .hero-proofline { margin-top: 44px; font-family: var(--mono); font-size: 0.82rem; color: var(--text-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .hero-proofline .live { display: inline-flex; align-items: center; gap: 6px; color: var(--good); } .hero-proofline .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); } /* ---- sections ---- */ section { padding: 80px 0; border-top: 1px solid var(--border); } .sec-kicker { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; } h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; letter-spacing: -0.015em; max-width: 640px; } .sec-sub { margin-top: 14px; color: var(--text-muted); max-width: 640px; } /* ---- pipeline strip ---- */ .pipeline { margin-top: 44px; display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 8px; } .stage { flex: 1; min-width: 150px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 16px; position: relative; } .stage + .stage { margin-left: 28px; } .stage + .stage::before { content: "→"; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); color: var(--accent-text); font-weight: 700; } .stage .n { font-family: var(--mono); font-size: 0.72rem; color: var(--accent-text); margin-bottom: 6px; } .stage .t { font-weight: 600; font-size: 0.98rem; margin-bottom: 4px; } .stage .d { font-size: 0.83rem; color: var(--text-muted); line-height: 1.45; } /* ---- case study ---- */ .case { margin-top: 44px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 36px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; } .case h3 { font-size: 1.25rem; margin-bottom: 10px; } .case p { color: var(--text-muted); font-size: 0.97rem; margin-bottom: 14px; } .case .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start; } .fact { border-left: 2px solid var(--accent); padding-left: 14px; } .fact .v { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; } .fact .k { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; } /* ---- offers ---- */ .offers { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .offer { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 32px; display: flex; flex-direction: column; } .offer.primary { border-color: rgba(252, 108, 38, 0.5); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 40%); } .offer .tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; } .offer h3 { font-size: 1.35rem; margin-bottom: 10px; letter-spacing: -0.01em; } .offer .pitch { color: var(--text-muted); font-size: 0.96rem; margin-bottom: 22px; } .offer ul { list-style: none; margin-bottom: 26px; flex: 1; } .offer li { padding: 7px 0 7px 26px; position: relative; font-size: 0.93rem; color: var(--text); } .offer li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; } .offer .price { font-family: var(--mono); font-size: 0.88rem; color: var(--text-muted); margin-bottom: 18px; } .offer .price strong { color: var(--text); font-size: 1.05rem; } /* ---- fit / audience ---- */ .fit-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .fit { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; } .fit h4 { font-size: 1.02rem; margin-bottom: 8px; } .fit p { font-size: 0.88rem; color: var(--text-muted); } /* ---- about ---- */ .about-grid { margin-top: 36px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; } .about-grid p { color: var(--text-muted); margin-bottom: 14px; } .about-grid p strong { color: var(--text); } .stack { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; font-family: var(--mono); font-size: 0.82rem; color: var(--text-muted); align-self: start; } .stack .h { color: var(--accent-text); margin-bottom: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; } .stack div { padding: 3px 0; } /* ---- contact ---- */ .contact-box { margin-top: 40px; background: var(--surface); border: 1px solid rgba(252, 108, 38, 0.45); border-radius: 14px; padding: 44px; text-align: center; } .contact-box h3 { font-size: 1.5rem; margin-bottom: 10px; } .contact-box p { color: var(--text-muted); max-width: 480px; margin: 0 auto 26px; } .contact-box .mail { font-family: var(--mono); font-size: 0.9rem; color: var(--text-muted); margin-top: 18px; } .contact-box .mail a { color: var(--accent-text); text-decoration: none; } /* ---- footer ---- */ footer { border-top: 1px solid var(--border); padding: 32px 0; font-size: 0.82rem; color: var(--text-muted); } .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer-links { display: flex; gap: 18px; flex-wrap: wrap; } .footer-links a, .footer-links button { color: var(--text-muted); text-decoration: none; font-size: 0.82rem; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; } .footer-links a:hover, .footer-links button:hover { color: var(--text); text-decoration: underline; } /* ---- cookie banner ---- */ .cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--surface-2); border-top: 1px solid var(--border); padding: 16px 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12); } .cookie-bar.hidden { display: none; } .cookie-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: space-between; } .cookie-inner p { font-size: 0.85rem; color: var(--text-muted); max-width: 640px; } .cookie-inner p a { color: var(--accent-text); } .cookie-actions { display: flex; gap: 10px; } .cookie-actions .btn { padding: 8px 16px; font-size: 0.88rem; } /* ---- legal pages ---- */ .legal { padding: 64px 0 80px; } .legal h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 8px; } .legal .updated { font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted); margin-bottom: 36px; } .legal h2 { font-size: 1.35rem; margin: 40px 0 12px; } .legal h3 { font-size: 1.05rem; margin: 24px 0 8px; } .legal p, .legal li { color: var(--text-muted); font-size: 0.95rem; max-width: 760px; } .legal p { margin-bottom: 12px; } .legal ul { margin: 0 0 12px 22px; } .legal li { margin-bottom: 6px; } .legal strong { color: var(--text); } .legal a { color: var(--accent-text); } @media (max-width: 820px) { .case, .offers, .about-grid { grid-template-columns: 1fr; } .fit-grid { grid-template-columns: 1fr; } .nav-links a:not(.btn):not(.lang) { display: none; } header { padding: 64px 0 56px; } section { padding: 60px 0; } }