/* Shared stylesheet for the Sofium public site (sofium.com.tr). One place for the look of the home page + every legal/document page, so they stay visually consistent and there's no per-page CSS to keep in sync. The /shop/ landing page is intentionally standalone (a rich card UI). */ :root { color-scheme: light dark; --accent: #800020; /* Sofium brand burgundy (matches the app theme) */ --link: var(--accent); /* link text — lifted in dark mode for contrast */ --measure: 720px; /* comfortable reading width for document pages */ --line: rgba(127, 127, 127, .22); /* Shared surface palette — the SINGLE source of the public site's colours. Set on so the page background fills the whole viewport (not just the centred column). The /shop card mirrors these exact values. */ --bg: #f6f6f7; /* soft grey page background */ --card: #ffffff; /* raised surfaces (cards) pop on the grey */ --fg: #1a1a1a; --muted: #6b6b6b; --shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06); } /* Deep burgundy is too low-contrast as text on a dark background — lift links to a lighter burgundy-rose so they stay legible while keeping the brand hue. Brand solids (the header dot) keep the true --accent. */ @media (prefers-color-scheme: dark) { :root { --link: #E0728C; --bg: #1a1a1a; /* greyish dark, not pure black */ --card: #242424; --fg: #f2f2f2; --muted: #9a9a9a; --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3); } } * { box-sizing: border-box; } html { background: var(--bg); } /* Make the `hidden` attribute authoritative — component display rules like `.store-badge{display:inline-flex}` would otherwise override the UA default and reveal JS-hidden elements (e.g. the iOS badge before iOS launch). */ [hidden] { display: none !important; } body { font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif; max-width: var(--measure); margin: 0 auto; padding: 32px 24px 72px; line-height: 1.6; color: var(--fg); -webkit-font-smoothing: antialiased; } h1 { font-size: 1.6rem; letter-spacing: -.01em; margin: 0 0 .4rem; } h2 { font-size: 1.15rem; margin-top: 2rem; } h3 { font-size: 1rem; margin-top: 1.4rem; } p, li { line-height: 1.6; } ul { padding-left: 1.25rem; } li { margin: .3rem 0; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; } code, .ph { background: rgba(127, 127, 127, .18); padding: 1px 5px; border-radius: 4px; font-size: .92em; } .muted { opacity: .7; font-size: .9rem; } /* Draft banner on the not-yet-final legal pages. */ .todo { background: rgba(216, 144, 0, .12); border: 1px solid rgba(216, 144, 0, .5); padding: 12px 14px; border-radius: 8px; margin: 16px 0; } /* ── Shared brand header + language toggle (document pages) ─────────────── */ .site-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .site-head .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.01em; color: inherit; } .site-head .brand:hover { text-decoration: none; } .site-head .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; } .site-head .lang { font-size: .85rem; display: inline-flex; gap: 8px; } .site-head .lang a { opacity: .75; } .site-head .lang .current { font-weight: 700; opacity: 1; } .site-foot { margin-top: 3rem; padding-top: 16px; border-top: 1px solid var(--line); opacity: .75; font-size: .85rem; } /* ── Home page (body class="home") ───────────────────────────────────────── Landing layout: a centered hero + a two-column capabilities section + a multi-column footer. Wider measure than document pages so the feature grid breathes. Content is left-aligned; only the hero is centered. */ body.home { max-width: 760px; padding-top: 24px; } .brand-icon { border-radius: 7px; display: block; } /* Header language toggle: the two links. `.current` (set by JS) marks the active language. Shares .site-head/.lang from the block above. */ .site-head .lang a { cursor: pointer; } .site-head .lang a.current { font-weight: 700; opacity: 1; } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { text-align: center; padding: 40px 0 8px; } .hero-icon { border-radius: 22px; box-shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.18)); margin-bottom: 18px; } .hero .wordmark { font-size: 2.6rem; margin: 0; letter-spacing: -.02em; } .hero .slogan { color: var(--link); font-weight: 600; font-size: 1.15rem; margin: 2px 0 14px; } .hero .lead { max-width: 30rem; margin: 0 auto; opacity: .8; font-size: 1.02rem; } .store-note { margin-top: 10px; } /* Official app-store badges — clear space + contrast per Google Play badge guidelines. On the neutral page background (light: white / dark: near-black) the black "color" badge keeps its required contrast; the badge's own border holds it legible in dark mode. Heights match if a second (Apple) badge lands. */ .stores { /* ≥12px all round = the required 1/4 of the 48px badge height (clear space); 12px gap holds that between adjacent badges. */ margin: 24px 0 0; display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; } .store-badge { display: inline-flex; } .store-badge img { height: 48px; width: auto; display: block; } /* ── Capabilities — two-panel comparison (customers | businesses) ───────── */ .features { margin-top: 44px; } .features > h2 { text-align: center; margin-bottom: 24px; } .panels { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; } /* Divider between the two panels (sits in the grid gap). */ .panel + .panel { border-left: 1px solid var(--line); padding-left: 48px; } .panel-head { /* --link (not --accent) so it lifts to the rose tint on dark backgrounds. */ font-size: .95rem; font-weight: 700; color: var(--link); margin: 0 0 4px; letter-spacing: -.01em; } .flist { list-style: none; padding: 0; margin: 0; } .flist li { display: flex; gap: 13px; align-items: flex-start; padding: 15px 0; border-top: 1px solid var(--line); } .flist li:first-of-type { border-top: none; } .fic { flex: none; color: var(--link); margin-top: 1px; } .fic svg { width: 21px; height: 21px; display: block; } .flist strong { display: block; font-size: .97rem; margin-bottom: 1px; } .flist .fd { color: var(--muted); font-size: .88rem; line-height: 1.45; } @media (max-width: 620px) { .panels { grid-template-columns: 1fr; gap: 0; } .panel + .panel { border-left: none; padding-left: 0; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; } .hero .wordmark { font-size: 2.2rem; } } /* ── Footer ───────────────────────────────────────────────────────────── */ .home-foot { margin-top: 3.5rem; } .foot-cols { display: flex; flex-wrap: wrap; gap: 32px 56px; margin-bottom: 20px; } .foot-col { display: flex; flex-direction: column; gap: 8px; } .foot-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .55; font-weight: 700; margin-bottom: 2px; } .foot-col a { opacity: .85; } .foot-legal { margin: 0; }