/* ────────────────────────────────────────────────────────────────────────── app-legal.css — shared shell for every APP legal page (FotoPost · Askra · CleanFotos · AppSwipe) Goal: each app's privacy policy / terms / refund / deletion page should look like that app's product page on crocodata.net, and read in the same typeface the app itself uses on the phone. Typeface per app (taken from the Flutter source, not guessed): Askra → Inter (lib/theme.dart: GoogleFonts.inter / interTextTheme) CleanFotos → Roboto (lib/theme/app_theme.dart: fontFamily: 'Roboto') AppSwipe → Roboto (lib/theme/app_theme.dart: fontFamily: 'Roboto') FotoPost → Roboto (no fontFamily set → Flutter default: Roboto/SF) Usage: Load after /styles.css so the site design tokens are available. ────────────────────────────────────────────────────────────────────────── */ /* ── Per-app themes ── */ .theme-fotopost { --app-font: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --app-bg: #0a0f0d; --app-card: #151f1a; --app-surface: #1a2820; --app-border: rgba(232, 201, 160, 0.16); --app-border-soft: rgba(255, 255, 255, 0.08); --app-text: #f2ece4; --app-muted: #a89888; --app-accent: #E8C9A0; --app-accent-dim: rgba(232, 201, 160, 0.12); --app-on-accent: #1a1814; } .theme-askra { --app-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --app-bg: #0F0E1A; --app-card: #1A1828; --app-surface: #24213A; --app-border: rgba(212, 175, 122, 0.18); --app-border-soft: rgba(255, 255, 255, 0.07); --app-text: #F5F0E8; --app-muted: #9B95B8; --app-accent: #D4AF7A; --app-accent-dim: rgba(212, 175, 122, 0.12); --app-on-accent: #0F0E1A; } .theme-cleanfotos { --app-font: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --app-bg: #11101C; --app-card: #1A1930; --app-surface: #221F3C; --app-border: rgba(108, 99, 255, 0.22); --app-border-soft: rgba(255, 255, 255, 0.07); --app-text: #EFEDFA; --app-muted: #9B95B8; --app-accent: #8E87FF; --app-accent-dim: rgba(108, 99, 255, 0.14); --app-on-accent: #11101C; } .theme-appswipe { --app-font: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --app-bg: #100F1E; --app-card: #1A1832; --app-surface: #221F3E; --app-border: rgba(112, 104, 251, 0.22); --app-border-soft: rgba(255, 255, 255, 0.07); --app-text: #EFEDFA; --app-muted: #9B95B8; --app-accent: #928CFF; --app-accent-dim: rgba(112, 104, 251, 0.14); --app-on-accent: #100F1E; } /* ── Base ── */ .applegal { margin: 0; /* The accent glow lives on the page itself rather than inside the header. When it was a header ::after with overflow:hidden it got sliced off at the header's bottom border, leaving a hard edge under the title. Painted here it fades out naturally across the header, the nav pills and into the body. */ background-color: var(--app-bg); background-image: radial-gradient(ellipse 80% 460px at 50% -40px, var(--app-accent-dim) 0%, transparent 72%), radial-gradient(ellipse 55% 300px at 50% 120px, var(--app-accent-dim) 0%, transparent 65%); background-repeat: no-repeat, no-repeat; color: var(--app-text); font-family: var(--app-font); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; /* Neither Inter nor Roboto carries an optical-size axis; make sure the site-wide axis pin from styles.css cannot leak in here. */ font-optical-sizing: auto; font-variation-settings: normal; } .applegal * { box-sizing: border-box; } /* ── Page header: mirrors the product page hero ── */ .applegal > header, .applegal .app-head { background: transparent; border-bottom: none; padding: 48px 24px 28px; text-align: center; position: relative; } .applegal > header h1, .applegal .app-head h1 { position: relative; font-family: var(--app-font); font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; color: var(--app-accent); margin: 0 0 8px; } .applegal > header p, .applegal .app-head p { position: relative; color: var(--app-muted); font-size: 0.95rem; margin: 0; opacity: 1; } /* Crocodata bar above the app header */ .applegal .app-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 860px; margin: 0 auto; padding: 18px 24px 0; } .applegal .app-topbar a { color: var(--app-muted); font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .applegal .app-topbar a:hover { color: var(--app-accent); } .applegal .app-topbar img { width: 26px; height: 26px; border-radius: 6px; } /* ── Nav pills (delete-data / terms pages) and language switch ── */ .applegal .nav-top, .applegal .lang-switch { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 4px 24px 26px; background: transparent; border-bottom: 1px solid var(--app-border-soft); } /* Pages that show both a language switcher and a document nav: the two rows sit together, so only the lower one carries the dividing line. */ .applegal .lang-switch + .nav-top { padding-top: 18px; } .applegal .lang-switch:has(+ .nav-top) { border-bottom: none; padding-bottom: 0; } .applegal .nav-top a, .applegal .lang-switch a { color: var(--app-accent); text-decoration: none; font-weight: 500; font-size: 0.85rem; padding: 7px 16px; border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-accent-dim); transition: background 0.2s ease, color 0.2s ease; } .applegal .nav-top a:hover, .applegal .lang-switch a:hover, .applegal .nav-top a:focus, .applegal .lang-switch a:focus { background: var(--app-accent); color: var(--app-on-accent); } /* ── Content column ── */ .applegal main, .applegal section, .applegal .wrap { max-width: 860px; margin: 0 auto; padding: 44px 24px 80px; } .applegal section { display: none; } .applegal section.active { display: block; } /* ── Typography — headings use the SAME family and are distinguished by weight and colour only, never by a different typeface. ── */ .applegal h1, .applegal h2, .applegal h3 { font-family: var(--app-font); font-optical-sizing: auto; font-variation-settings: normal; } .applegal .wrap h1 { font-size: clamp(1.8rem, 4.5vw, 2.3rem); font-weight: 600; letter-spacing: -0.02em; color: var(--app-text); margin: 28px 0 8px; } .applegal h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; color: var(--app-accent); margin: 40px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--app-border-soft); scroll-margin-top: 90px; } .applegal h3 { font-size: 1.02rem; font-weight: 600; color: var(--app-text); margin: 24px 0 8px; } .applegal p, .applegal li { color: var(--app-muted); margin: 10px 0; line-height: 1.75; } .applegal ul, .applegal ol { margin: 10px 0 16px; padding-left: 22px; } .applegal li { margin: 6px 0; } .applegal li::marker { color: var(--app-accent); } .applegal strong { color: var(--app-text); font-weight: 600; } .applegal em { font-style: italic; } .applegal a { color: var(--app-accent); } .applegal a:hover { opacity: 0.82; } .applegal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: var(--app-surface); border: 1px solid var(--app-border-soft); border-radius: 6px; padding: 1px 6px; } .applegal .meta, .applegal .updated { color: var(--app-muted); font-size: 0.85rem; margin: 4px 0 26px; opacity: 0.85; } /* ── Boxes ── */ .applegal .contact-box, .applegal .steps { background: var(--app-card); border: 1px solid var(--app-border-soft); border-radius: 14px; padding: 20px 24px; margin: 18px 0; color: var(--app-muted); } .applegal .steps { border-left: 3px solid var(--app-accent); border-radius: 0 14px 14px 0; } .applegal .steps ol { margin-bottom: 0; } .applegal .highlight, .applegal .info, .applegal .warn, .applegal .green, .applegal .status, .applegal .callout { background: var(--app-card); border: 1px solid var(--app-border-soft); border-left: 3px solid var(--app-accent); border-radius: 0 14px 14px 0; padding: 16px 22px; margin: 18px 0; } .applegal .highlight, .applegal .callout { border-left-color: var(--app-accent); background: var(--app-accent-dim); } .applegal .info { border-left-color: #6d8fd0; background: rgba(109, 143, 208, 0.09); } .applegal .warn { border-left-color: #e2725b; background: rgba(226, 114, 91, 0.09); } .applegal .green, .applegal .status { border-left-color: #3ecf8e; background: rgba(62, 207, 142, 0.09); } .applegal .highlight p:last-child, .applegal .info p:last-child, .applegal .warn p:last-child, .applegal .green p:last-child, .applegal .status p:last-child, .applegal .callout p:last-child, .applegal .contact-box p:last-child { margin-bottom: 0; } /* ── Tables ── */ .applegal table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 18px 0 26px; font-size: 0.88rem; background: var(--app-card); border: 1px solid var(--app-border-soft); border-radius: 14px; overflow: hidden; } .applegal th, .applegal td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--app-border-soft); color: var(--app-muted); line-height: 1.6; } .applegal th { background: var(--app-accent-dim); color: var(--app-text); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.02em; } .applegal tr:last-child td, .applegal tr:last-child th { border-bottom: none; } .applegal .table-scroll { overflow-x: auto; } /* ── Askra brand lockup ── Matches AskraTypography.wordmark() in lib/theme.dart: Inter, weight 300, letter-spacing 0.19em, uppercase, gold. */ .applegal .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--app-accent); font-family: var(--app-font); font-size: 18px; font-weight: 300; letter-spacing: 0.19em; text-transform: uppercase; } .applegal .brand img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; } .applegal .wrap > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px 0 0; border: none; text-align: left; } .applegal .wrap > header::after { content: none; } .applegal .crocodata { color: var(--app-muted); font-size: 0.82rem; text-decoration: none; } .applegal .crocodata:hover { color: var(--app-accent); } /* ── Footer ── */ .applegal footer { max-width: 860px; margin: 0 auto; padding: 26px 24px 64px; border-top: 1px solid var(--app-border-soft); color: var(--app-muted); font-size: 0.85rem; text-align: center; } .applegal footer a { margin: 0 8px; color: var(--app-accent); } .applegal .legal-foot { max-width: 860px; margin: 0 auto; padding: 26px 24px 64px; border-top: 1px solid var(--app-border-soft); color: var(--app-muted); font-size: 0.85rem; } /* ── Mobile ── */ @media (max-width: 720px) { .applegal > header, .applegal .app-head { padding: 78px 20px 28px; } .applegal main, .applegal section, .applegal .wrap { padding: 32px 20px 64px; } .applegal h2 { margin-top: 32px; } .applegal table { font-size: 0.82rem; } .applegal th, .applegal td { padding: 10px; } }