/* 7nerds.com shared stylesheet Design tokens and page styles shared by the landing page, app pages, and privacy policies. Per-app accent: add .accent-lime (etc.) to . */ /* Manrope is the brand typeface. Self-hosted rather than loaded from a font CDN: every page here promises no third-party tracking, so the pages must not phone home to render. Variable weight 400-800 in one file per subset. */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Brand palette (see the 7nerds style guide). Teal, navy, gold, and white are the core colors; lime, orange, purple, and light teal are supporting colors used sparingly as per-app accents. */ --brand-navy: #1d2b3f; --brand-teal: #22b3a7; --brand-light-teal: #79d0d0; --brand-gold: #fdbd1b; --brand-orange: #f98a1e; --brand-lime: #9acc45; /* Semantic tokens. --accent is the text-and-fill accent and is always dark enough for white text (and readable as link text) in light mode; in dark mode it flips light and buttons take dark text via var(--bg). --accent-soft is the vivid brand tint used for decoration only, never behind text. */ --accent: #0e7c74; --accent-soft: var(--brand-teal); --ink: var(--brand-navy); --muted: #5e6875; --bg: #ffffff; --card: #f4f7f9; --border: #dde3e8; } @media (prefers-color-scheme: dark) { :root { --accent: #4fd1c5; --accent-soft: var(--brand-teal); --ink: #e6edf5; --muted: #93a1b1; --bg: #101a26; --card: #182635; --border: #2a3a4c; } } /* Per-app accents, drawn from the supporting palette to match each app icon. */ .accent-lime { --accent: #5c8b1b; --accent-soft: var(--brand-lime); } .accent-orange { --accent: #c0620b; --accent-soft: var(--brand-orange); } @media (prefers-color-scheme: dark) { .accent-lime { --accent: #a8d95c; } .accent-orange { --accent: #f9a03f; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.65 "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .wrap { max-width: 720px; margin: 0 auto; padding: 48px 20px 80px; } /* The header rule is the brand's teal-to-gold sweep, fading out to the right. */ header { border-bottom: 2px solid transparent; border-image: linear-gradient( 90deg, var(--accent-soft), var(--brand-gold) 55%, transparent ) 1; padding-bottom: 20px; margin-bottom: 28px; } h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; } h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin: 32px 0 8px; } h3 { font-weight: 700; } .eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; margin: 0 0 8px; } .tagline { color: var(--muted); font-size: 1.05rem; margin: 0; } .updated { color: var(--muted); font-size: .9rem; margin: 0; } p, li { color: var(--ink); } a { color: var(--accent); } ul { padding-left: 1.2em; } li { margin: 6px 0; } /* ---- Brand lockup ---- */ /* The full logo on the landing page: glasses mark above the wordmark. Inlined in the page (rather than an ) so the wordmark picks up Manrope and the page's own ink color, which keeps it legible in dark mode. */ .brand { margin: 0 0 14px; } .brand svg { display: block; width: clamp(150px, 42vw, 190px); height: auto; } .brand .brand-word { fill: var(--ink); } .brand .brand-seven { fill: var(--brand-teal); } .brand .brand-eye { fill: none; stroke: var(--ink); } /* The mark on its own, used beside the back-link and in the footer. */ .mark { display: inline-block; width: 22px; height: auto; vertical-align: -5px; margin-right: 7px; } /* ---- Components ---- */ .callout { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--accent-soft); border-radius: 12px; padding: 16px 18px; margin: 20px 0; } /* Breadcrumb back-link at the top of sub-pages */ .crumb { font-size: .9rem; margin: 0 0 24px; } .crumb a { color: var(--muted); text-decoration: none; font-weight: 600; } .crumb a:hover { color: var(--accent); } /* Buttons (App Store download link, etc.) */ .btn { display: inline-block; background: var(--accent); color: var(--bg); font-weight: 700; text-decoration: none; border-radius: 10px; padding: 12px 22px; margin: 8px 0; } .btn:hover { filter: brightness(1.08); } /* Small pill label ("Coming soon", price, etc.) */ .badge { display: inline-block; background: var(--card); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 3px 12px; font-size: .8rem; font-weight: 600; } /* App Store artwork. Squircle-ish corners and a soft lift, so the icon reads as an app icon rather than a photo dropped on the page. */ .app-icon { display: block; flex: none; aspect-ratio: 1; border-radius: 22.37%; box-shadow: 0 1px 2px rgba(29, 43, 63, .10), 0 8px 20px rgba(29, 43, 63, .10); } @media (prefers-color-scheme: dark) { .app-icon { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45); } } /* App page header: icon sits beside the app name, tagline runs full width below. */ .page-head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; } .page-head .app-icon { width: clamp(64px, 20vw, 88px); } .page-head .eyebrow { margin-bottom: 4px; } .page-head h1 { margin: 0; } /* App card grid on the landing page */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 28px 0; padding: 0; list-style: none; } .cards li { margin: 0; } .card { display: block; height: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-decoration: none; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .card:hover { border-color: var(--accent-soft); box-shadow: 0 8px 24px rgba(29, 43, 63, .08); transform: translateY(-2px); } .card h3 { margin: 0 0 4px; font-size: 1.1rem; } .card .app-subtitle { color: var(--accent); font-size: .85rem; font-weight: 700; margin: 0 0 8px; } .card p { color: var(--muted); font-size: .92rem; margin: 0; } .card .badge { margin-top: 12px; } /* Card heading row: icon beside the app name and subtitle. */ .card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .card-head .app-icon { width: 60px; } .card-head h3 { margin: 0 0 2px; } .card-head .app-subtitle { margin: 0; } /* ---- Long-form guide pages (e.g. /platecraft/guide/) ---- */ /* Guides run wider than the marketing pages to give screenshots room. */ .wrap-wide { max-width: 860px; } /* Table of contents */ .toc { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; margin: 24px 0 8px; } .toc h2 { margin: 0 0 8px; padding-top: 0; border-top: 0; font-size: 1rem; } .toc ol { margin: 0; padding-left: 1.3em; } .toc li { margin: 4px 0; } /* Section headings get a little more air in a long document */ .wrap-wide h2 { font-size: 1.35rem; margin: 52px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); } .wrap-wide h3 { font-size: 1.05rem; margin: 28px 0 6px; } /* Numbered walkthroughs */ .steps { counter-reset: step; list-style: none; padding-left: 0; margin: 16px 0; } .steps > li { counter-increment: step; position: relative; padding-left: 44px; margin: 14px 0; min-height: 30px; } .steps > li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 30px; height: 30px; border-radius: 999px; background: var(--accent); color: var(--bg); font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; } /* Screenshots. One or two phone shots side by side, capped so a tall portrait screenshot never dominates the page. */ .shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 24px 0; } .shots.one { grid-template-columns: minmax(0, 300px); } figure.shot { margin: 0; } figure.shot img { display: block; width: 100%; max-width: 300px; height: auto; border: 1px solid var(--border); border-radius: 18px; background: var(--card); } figure.shot figcaption { color: var(--muted); font-size: .85rem; margin-top: 8px; max-width: 300px; } /* Emphasis boxes: plain note, and a heads-up for anything irreversible */ .note, .warn { border: 1px solid var(--border); border-left: 4px solid var(--accent-soft); background: var(--card); border-radius: 8px; padding: 14px 16px; margin: 18px 0; } .warn { border-left-color: var(--brand-orange); } @media (prefers-color-scheme: dark) { .warn { border-left-color: var(--brand-gold); } } .note p:first-child, .warn p:first-child { margin-top: 0; } .note p:last-child, .warn p:last-child { margin-bottom: 0; } .note strong, .warn strong { display: block; margin-bottom: 2px; } /* On-screen labels quoted in the instructions ("tap Save") */ .ui { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: .92em; font-weight: 600; white-space: nowrap; } /* FAQ / troubleshooting disclosures */ details.faq { border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin: 10px 0; background: var(--card); } details.faq summary { cursor: pointer; font-weight: 700; } details.faq[open] summary { margin-bottom: 8px; } /* "Back to top" links between sections */ .totop { font-size: .82rem; margin: 6px 0 0; } .totop a { color: var(--muted); text-decoration: none; } footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: .9rem; } footer a { color: var(--muted); } footer .footer-brand { display: flex; align-items: center; color: var(--ink); font-weight: 700; } footer .footer-brand .mark { width: 26px; }