/* ========================================================= * GetEdda.com — marketing site styles * Ported from the Edda app's "Hearth" design system * (design/colors_and_type.css) so the site matches the app. * ========================================================= */ /* Fonts are loaded via tags in each page's (preconnect + * stylesheet) instead of an @import here — @import serializes the request * chain, and the old @import URL had a malformed Newsreader axis list that * 400'd, so the webfonts never actually loaded. */ :root { --paper: #FBF8F2; --card: #FFFFFF; --ink: #1E1A15; --ink-2: #5C554B; --ink-3: #8A8175; --hair: #E5DFD3; --hair-soft: #EFEAE0; --terra: #C46B4B; --terra-soft: #F4DDD0; --terra-ink: #7A4D3A; --sage: #2F6E5E; --sage-soft: #DDEBE5; --ochre: #C99649; --ochre-soft: #F2E4C5; --plum: #7B4A6E; --plum-soft: #E7D4E0; --sky: #3E6E92; --sky-soft: #D8E4ED; --green: #5B8A4E; --green-soft: #DCE7D2; --danger: #B23A2A; --danger-soft: #F4D5CF; --font-serif: "Newsreader", "Source Serif 4", Georgia, serif; --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --radius-chip: 8px; --radius-card: 14px; --radius-sheet: 20px; --radius-pill: 999px; --elevation-1: 0 1px 2px rgba(30,26,21,0.04); --elevation-2: 0 4px 14px rgba(30,26,21,0.08); --elevation-3: 0 12px 32px rgba(30,26,21,0.14); --elevation-fab: 0 10px 24px rgba(196,107,75,0.32); --ease: cubic-bezier(0.32, 0.72, 0, 1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; display: block; } html { scroll-behavior: smooth; } /* Sticky header (68px) would otherwise overlap the top of any anchor target when the browser jumps straight to it — this keeps the target clear. */ #notify, #features, #how-it-works, #contribution, #pricing { scroll-margin-top: 90px; } a { color: inherit; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* --------------------------------------------------------- * Type * --------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; margin: 0; color: var(--ink); letter-spacing: -0.2px; } h1 { font-size: 44px; line-height: 1.08; letter-spacing: -0.6px; } h2 { font-size: 30px; line-height: 1.14; } h3 { font-size: 20px; line-height: 1.25; font-weight: 600; } p { margin: 0; } .eyebrow { font: 700 11px/1 var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--terra-ink); background: var(--terra-soft); display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-pill); } .lede { font-size: 17px; color: var(--ink-2); line-height: 1.6; } .fg-2 { color: var(--ink-2); } .fg-3 { color: var(--ink-3); } /* --------------------------------------------------------- * Header * --------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 20; background: rgba(251, 248, 242, 0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair-soft); } .site-header .wrap { height: 68px; display: flex; align-items: center; gap: 28px; } .wordmark { display: inline-flex; align-items: baseline; font-family: var(--font-serif); font-weight: 500; font-size: 22px; letter-spacing: -0.4px; color: var(--ink); text-decoration: none; gap: 4px; } .wordmark .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--terra); align-self: center; } .site-nav { display: flex; align-items: center; gap: 26px; margin-left: 8px; flex: 1; } .site-nav a { font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; } .site-nav a:hover { color: var(--ink); } /* --------------------------------------------------------- * Buttons * --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 14px; font: 600 15px/1 var(--font-sans); text-decoration: none; cursor: pointer; border: none; transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--terra); color: #fff; box-shadow: var(--elevation-fab); } .btn-primary:hover { box-shadow: 0 12px 28px rgba(196,107,75,0.4); } .btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--hair); } .btn-ghost:hover { border-color: var(--ink-3); } .btn-sm { height: 40px; padding: 0 16px; font-size: 13px; border-radius: 12px; } /* --------------------------------------------------------- * Hero * --------------------------------------------------------- */ .hero { padding: 72px 0 40px; } .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 { margin: 18px 0 16px; /* Sized so "Edda: Track what matters, together" stays on one line in the * hero's text column (533px at the 1120px wrap; measured 635px at 44px, * so ≤36.9px fits). 3.2vw tracks the column as the grid narrows. */ font-size: clamp(28px, 3.2vw, 36px); text-wrap: balance; } .hero .cta-row { display: flex; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; } .hero .cta-note { font-size: 12.5px; color: var(--ink-3); } /* --------------------------------------------------------- * Notify form (MailerLite signup) * --------------------------------------------------------- */ .notify-form { margin-top: 28px; } .notify-row { display: flex; gap: 10px; flex-wrap: wrap; } .notify-input { flex: 1; min-width: 220px; height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--hair); background: var(--card); font: 500 15px/1 var(--font-sans); color: var(--ink); } .notify-input::placeholder { color: var(--ink-3); } .notify-input:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 4px rgba(196,107,75,0.14); } .platform-pick { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .platform-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; } .platform-pick label { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--hair); background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease); } .platform-pick input:checked + label { /* Solid terra, not terra-soft — the #notify CTA band's background is * terra-soft, so a terra-soft selected pill blends into it there while * the white unselected pills stand out (inverted affordance). */ background: var(--terra); border-color: var(--terra); color: #fff; } .platform-pick input:focus-visible + label { outline: 2px solid var(--terra); outline-offset: 2px; } .notify-success, .notify-error { display: flex; align-items: center; padding: 14px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; } .notify-success { background: var(--sage-soft); color: #173d33; } .notify-error { background: var(--danger-soft); color: #7a2417; } .notify-error a { color: inherit; text-decoration: underline; } .store-badges { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; } .store-badge { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--hair); color: var(--ink-3); } .store-badge .label { line-height: 1.15; } .store-badge .label .small { display: block; font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; } .store-badge .label .big { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); } /* --------------------------------------------------------- * Phone mockup * --------------------------------------------------------- */ .phone { width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 9 / 18.5; background: var(--card); border-radius: 34px; border: 6px solid var(--ink); box-shadow: var(--elevation-3); overflow: hidden; position: relative; } .phone-inner { position: absolute; inset: 0; background: var(--paper); display: flex; flex-direction: column; padding: 22px 14px 14px; gap: 10px; } .phone-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 64px; height: 16px; border-radius: 10px; background: var(--ink); z-index: 5; } .phone-title { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--ink); margin: 6px 2px 2px; } .jcard { background: var(--card); border: 1px solid var(--hair-soft); border-radius: 12px; padding: 10px; display: flex; align-items: center; gap: 10px; box-shadow: var(--elevation-1); } .jcard .bar { width: 3px; align-self: stretch; border-radius: 3px; } .tile { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .jcard .lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .line { height: 6px; border-radius: 3px; background: var(--hair-soft); } .line.w60 { width: 60%; } .line.w40 { width: 40%; } .line.w80 { width: 80%; } .mock-avatars { display: flex; } .mock-avatar { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--card); margin-left: -5px; } .mock-avatar:first-child { margin-left: 0; } /* Fairness meter mock */ .fair-row { display: flex; align-items: center; gap: 8px; } .fair-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .fair-track { flex: 1; height: 6px; border-radius: 3px; background: var(--hair-soft); overflow: hidden; } .fair-fill { height: 100%; border-radius: 3px; } /* --------------------------------------------------------- * Trust strip * --------------------------------------------------------- */ .trust { padding: 8px 0 48px; text-align: center; } .trust-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .trust-pill { font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--card); border: 1px solid var(--hair-soft); border-radius: var(--radius-pill); padding: 8px 16px; } /* --------------------------------------------------------- * Sections * --------------------------------------------------------- */ section { padding: 64px 0; } .section-head { max-width: 620px; margin: 0 0 40px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feature-card { background: var(--card); border: 1px solid var(--hair-soft); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--elevation-1); transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease); } .feature-card:hover { transform: translateY(-2px); border-color: var(--accent, var(--hair)); box-shadow: var(--elevation-1), 0 8px 16px var(--accent-glow, rgba(30,26,21,0.04)); } .feature-card .tile { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; margin-bottom: 16px; } .feature-card h3 { margin-bottom: 8px; } .feature-card p { font-size: 14px; color: var(--ink-2); line-height: 1.55; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .step { position: relative; padding-left: 4px; } .step-num { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--terra); background: var(--terra-soft); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .step h3 { margin-bottom: 8px; } .step p { font-size: 14px; color: var(--ink-2); } .screens-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } .screen-caption { text-align: center; margin-top: 16px; } .screen-caption h3 { font-size: 16px; } .screen-caption p { font-size: 13px; color: var(--ink-3); margin-top: 4px; } /* Fairness callout */ .fair-callout { background: var(--card); border: 1px solid var(--hair-soft); border-radius: var(--radius-sheet); box-shadow: var(--elevation-2); padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .fair-quote { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--ink); line-height: 1.3; } .fair-legend { display: flex; gap: 18px; margin-top: 22px; flex-wrap: wrap; } .fair-legend .item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); } .fair-legend .dot { width: 9px; height: 9px; border-radius: 50%; } .fair-card-mock { background: var(--paper); border: 1px solid var(--hair-soft); border-radius: 14px; padding: 20px; } .fair-card-mock .member-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair-soft); } .fair-card-mock .member-row:last-child { border-bottom: none; } .fair-card-mock .avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 14px; flex-shrink: 0; } .fair-card-mock .member-name { font-size: 14px; font-weight: 600; color: var(--ink); } .fair-card-mock .member-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; } /* Pricing */ .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 640px; margin: 0 auto; } .pricing-card { background: var(--card); border: 1px solid var(--hair-soft); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--elevation-1); position: relative; } .pricing-card.highlight { border-color: var(--terra); box-shadow: var(--elevation-2); } .pricing-badge { position: absolute; top: -12px; right: 22px; background: var(--terra); color: #fff; font: 700 11px/1 var(--font-sans); letter-spacing: 0.6px; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-pill); } .pricing-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .pricing-list li { font-size: 14px; color: var(--ink-2); padding-left: 24px; position: relative; } .pricing-list li::before { content: ''; position: absolute; left: 2px; top: 4px; width: 6px; height: 10px; border-right: 1.6px solid var(--sage); border-bottom: 1.6px solid var(--sage); transform: rotate(45deg); } /* Final CTA band */ .cta-band { background: var(--terra-soft); border-radius: var(--radius-sheet); padding: 56px 48px; text-align: center; } .cta-band h2 { max-width: 480px; margin: 0 auto 12px; } .cta-band .lede { max-width: 460px; margin: 0 auto; } .cta-band .cta-row { justify-content: center; margin-top: 26px; } /* --------------------------------------------------------- * Footer * --------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--hair-soft); padding: 40px 0 32px; } .site-footer .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-links { display: flex; gap: 22px; flex-wrap: wrap; } .footer-links a { font-size: 13px; color: var(--ink-2); text-decoration: none; } .footer-links a:hover { color: var(--ink); } .footer-note { font-size: 12.5px; color: var(--ink-3); } /* --------------------------------------------------------- * Legal pages * --------------------------------------------------------- */ .legal-wrap { max-width: 720px; margin: 0 auto; padding: 56px 24px 96px; } .legal-wrap h1 { margin-bottom: 8px; } .legal-updated { font-size: 13px; color: var(--ink-3); margin-bottom: 28px; } .legal-draft-notice { background: var(--ochre-soft); border: 1px solid #E0C48A; border-radius: 12px; padding: 16px 18px; font-size: 13.5px; color: #6b4d16; line-height: 1.55; margin-bottom: 36px; } .legal-wrap h2 { font-size: 19px; margin-top: 36px; margin-bottom: 12px; } .legal-wrap p, .legal-wrap li { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; } .legal-wrap p { margin-bottom: 16px; } .legal-wrap p:last-child { margin-bottom: 0; } .legal-wrap ul { padding-left: 20px; margin: 12px 0; } .legal-wrap li { margin-bottom: 6px; } .legal-wrap a.inline { color: var(--terra-ink); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 2px; } .legal-wrap strong { color: var(--ink); } /* --------------------------------------------------------- * Responsive * --------------------------------------------------------- */ @media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; } .hero { text-align: left; padding-top: 48px; } h1 { font-size: 34px; } .hero h1 { font-size: 34px; } /* single column: wrap is fine, keep impact */ .features-grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: 1fr; gap: 32px; } .screens-row { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; gap: 40px; } .fair-callout { grid-template-columns: 1fr; padding: 28px; } .pricing-grid { grid-template-columns: 1fr; max-width: 380px; } .site-nav { display: none; } .cta-band { padding: 40px 24px; } } @media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } .site-header .wrap { height: 60px; } } @media (prefers-reduced-motion: reduce) { .feature-card { transition: none; } .feature-card:hover { transform: none; } }