/* ========================================================================== Diomo studio site One hand written stylesheet. No framework, no build step. Identity: paper and ink. See DESIGN.md at the repo root. Contents 1. Fonts 2. Tokens 3. Reset and base 4. Layout primitives 5. Type 6. Header 7. Buttons and links 8. Cards and app grid 9. Promises 10. App page 11. Legal pages 12. Footer 13. Motion ========================================================================== */ /* 1. Fonts ================================================================ */ /* Manrope, self hosted. Variable file, so one download covers 600 and 700. Never load fonts from a third party: that would send the visitor's IP to another company on every page view and make the privacy page a lie. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600 700; 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; } /* latin-ext carries ă â î ș ț, so Romanian never falls back mid word. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600 700; 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; } /* 2. Tokens =============================================================== */ :root { /* Light, default */ --paper: #FAF8F5; --surface: #FFFFFF; --ink: #14140F; --ink-soft: #55554E; --hairline: #E4E0D9; /* Studio default accent. App pages override it on . */ --accent: #14140F; --accent-ink: #FAF8F5; /* Type */ --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Shape */ --radius-card: 16px; --measure: 68ch; /* Motion */ --ease: cubic-bezier(0.2, 0, 0, 1); --fast: 160ms; --slow: 240ms; } /* Per app accent, set on the root element of that app's pages only. Adding the second app is three lines here plus one class on . */ .accent-emerald { --accent: #0F9D6A; --accent-ink: #0B1A14; } @media (prefers-color-scheme: dark) { :root { --paper: #0F0F0E; --surface: #191918; --ink: #F2F0EA; --ink-soft: #A3A099; --hairline: #2A2A28; --accent: #F2F0EA; --accent-ink: #0F0F0E; } .accent-emerald { --accent: #35C48F; --accent-ink: #08150F; } } /* 3. Reset and base ======================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; height: auto; } ::selection { background: var(--accent); color: var(--accent-ink); } /* Focus. Never remove the ring, only replace it with a better one. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* Keyboard users land here first. Invisible until focused. */ .skip-link { position: absolute; left: 24px; top: -100px; z-index: 10; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: top var(--fast) var(--ease); } .skip-link:focus { top: 16px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* 4. Layout primitives ==================================================== */ .wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 24px; } @media (min-width: 768px) { .wrap { padding-inline: 40px; } } /* Vertical rhythm. Exact 8px grid values at each step rather than a fluid clamp, so every section boundary lands on the grid. */ .section { padding-block: 48px; } @media (min-width: 768px) { .section { padding-block: 64px; } } @media (min-width: 1024px) { .section { padding-block: 96px; } } .section--hero { padding-block: 64px 48px; } @media (min-width: 768px) { .section--hero { padding-block: 96px 64px; } } @media (min-width: 1024px) { .section--hero { padding-block: 128px 96px; } } .section + .section { border-top: 1px solid var(--hairline); } /* Text blocks are capped at 68 characters. Long measure is the most common reason a text heavy page feels amateur. */ .measure { max-width: var(--measure); } /* 5. Type ================================================================= */ h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; text-wrap: balance; } .display { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; } h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; } p { margin: 0; } .lead { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; color: var(--ink-soft); } .small { font-size: 0.9375rem; } .eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 16px; } /* Stack utility: consistent vertical gaps without margin collapsing games. */ .stack > * + * { margin-top: 16px; } .stack-24 > * + * { margin-top: 24px; } .stack-48 > * + * { margin-top: 48px; } /* 6. Header =============================================================== */ .site-header { border-bottom: 1px solid var(--hairline); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding-block: 16px; } .wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .wordmark__mark { width: 28px; height: 28px; flex: none; color: var(--ink); } /* Styled here rather than with fill attributes, so the mark follows the theme and no inline style attribute is needed under the strict CSP. */ .mark-page { fill: var(--paper); } .mark-fold { fill: var(--paper); opacity: 0.45; } .site-nav { display: flex; align-items: center; gap: 24px; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; } .site-nav a { color: var(--ink-soft); text-decoration: none; transition: color var(--fast) var(--ease); } .site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--ink); } /* 7. Buttons and links ==================================================== */ /* Body links: ink text with an accent underline. The accent is never used as small text colour, it does not reach AA at body size on paper. */ .prose a, .link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color var(--fast) var(--ease); } .prose a:hover, .link:hover { text-decoration-color: var(--ink); } /* Nothing on the site uses a button yet. These stay because the Google Play badge slot and the next app page will, and because a pill button defined once is cheaper than one invented twice. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border: 1px solid transparent; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--secondary { background: transparent; border-color: var(--hairline); color: var(--ink); } .btn--secondary:hover { border-color: var(--ink-soft); } .btn-row { display: flex; flex-wrap: wrap; gap: 16px; } /* 8. Cards and app grid =================================================== */ /* One card must look deliberate, six must look right. The grid centres its tracks, so a single card sits centred instead of orphaned on the left. */ .app-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); justify-content: center; gap: 24px; } .card { display: block; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 32px; color: inherit; text-decoration: none; transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease); } a.card:hover { transform: translateY(-2px); border-color: var(--ink-soft); } .app-card__icon { width: 64px; height: 64px; border-radius: 14px; margin-bottom: 24px; } .app-card__name { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; } .app-card__desc { color: var(--ink-soft); margin-bottom: 24px; } .app-card__cta { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: var(--ink); } .app-card__cta::after { content: ' \2192'; display: inline-block; transition: transform var(--fast) var(--ease); } a.card:hover .app-card__cta::after { transform: translateX(3px); } /* Small accent detail, not a background wash. */ .tag { display: inline-block; padding: 3px 10px; border: 1px solid var(--accent); border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; } /* 9. Promises ============================================================= */ .promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; } @media (min-width: 768px) { .promises { grid-template-columns: repeat(2, 1fr); gap: 32px 48px; } } @media (min-width: 1024px) { .promises { gap: 40px 64px; } } .promise { padding-top: 20px; border-top: 1px solid var(--hairline); max-width: 46ch; } .promise h3 { margin-bottom: 4px; } .promise p { color: var(--ink-soft); font-size: 0.9375rem; } /* 10. App page ============================================================ */ .app-hero { display: grid; gap: 32px; align-items: start; } @media (min-width: 900px) { .app-hero { grid-template-columns: minmax(0, 1fr) 260px; gap: 64px; } } .app-hero__icon { width: 88px; height: 88px; border-radius: 20px; margin-bottom: 24px; } /* Store badge slot. Replace the placeholder link with Google's official badge image, redrawing it is against their brand guidelines. */ .store-badge img { height: 56px; width: auto; } .shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .shot { margin: 0; } .shot img { width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); } /* A phone screenshot is roughly 1080 by 2340. Left unconstrained it would be taller than the viewport, so the hero copy is capped against it. */ .shot--hero { width: 100%; max-width: 260px; margin-inline: auto; } /* Gallery screenshots sit two or three up and never grow past a phone's width. */ .shots .shot img { max-width: 300px; margin-inline: auto; } .shot figcaption { margin-top: 12px; color: var(--ink-soft); font-size: 0.9375rem; } /* Free versus premium, stated as plainly as the in app paywall states it. */ .plans { display: grid; gap: 24px; } @media (min-width: 768px) { .plans { grid-template-columns: repeat(2, 1fr); } } .plans .card h3 { margin-bottom: 8px; } .plan__price { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; margin-bottom: 16px; } .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 0.9375rem; } .ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; } .ticks li::before { content: ''; width: 8px; height: 8px; margin-top: 8px; margin-left: 6px; border-radius: 50%; background: var(--accent); } .feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; } @media (min-width: 768px) { .feature-list { grid-template-columns: repeat(2, 1fr); gap: 32px 48px; } } .feature-list h3 { margin-bottom: 4px; } .feature-list p { color: var(--ink-soft); font-size: 0.9375rem; max-width: 44ch; } /* 11. Legal pages ========================================================= */ .prose { max-width: var(--measure); } .prose > * + * { margin-top: 20px; } .prose h2 { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); } .prose h3 { margin-top: 32px; } .prose ul, .prose ol { margin-block: 20px; padding-left: 24px; } .prose li + li { margin-top: 8px; } .prose strong { font-weight: 600; } .doc-meta { color: var(--ink-soft); font-size: 0.9375rem; } /* Draft notice. Remove this block from the HTML once the wording is final. */ .notice { border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: 4px; background: var(--surface); padding: 20px 24px; font-size: 0.9375rem; color: var(--ink-soft); } .notice strong { color: var(--ink); font-family: var(--font-display); font-weight: 700; } /* Summary table on the privacy page. Scrolls inside itself on narrow screens rather than pushing the page sideways. */ .table-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-card); } .data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; background: var(--surface); } .data-table th, .data-table td { text-align: left; padding: 16px 20px; vertical-align: top; } .data-table th { font-family: var(--font-display); font-weight: 600; white-space: nowrap; } .data-table tbody tr { border-top: 1px solid var(--hairline); } .data-table td:last-child { color: var(--ink-soft); } /* 12. Footer ============================================================== */ .site-footer { border-top: 1px solid var(--hairline); padding-block: 48px; color: var(--ink-soft); font-size: 0.9375rem; } .footer-grid { display: grid; gap: 32px; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; } } .footer-blurb { margin-top: 16px; max-width: 34ch; } .footer-col h2 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 16px; } .footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .site-footer a { color: var(--ink-soft); text-decoration: none; transition: color var(--fast) var(--ease); } .site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .footer-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 0.875rem; } /* 13. Motion ============================================================== */ /* Seasoning only. Transform and opacity, nothing that triggers layout. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .btn:hover, a.card:hover { transform: none; } }