/* =========================================================================== Aniline Applications Inc — site styles Built from the supplied mockups (home + Indigo + Croissant, light & dark). Theming: per-page palette via body class (.t-home / .t-indigo / .t-croissant) Light / dark switched via [data-theme] on (system default + toggle). =========================================================================== */ /* ----- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ----- Type tokens ------------------------------------------------------- */ :root { --font-display: "Citywide", "Arial Narrow", sans-serif; --font-display-wide: "Citywide Semiwide", "Citywide", sans-serif; --font-body: ff-meta-serif-web-pro, Georgia, "Times New Roman", serif; --font-ui: ff-meta-web-pro, "Helvetica Neue", Arial, sans-serif; --container: 1060px; --pad: clamp(1.25rem, 5vw, 4rem); --rule-w: 1px; --t: 220ms ease; } /* =========================================================================== PALETTES =========================================================================== */ /* ---- Home -------------------------------------------------------------- */ [data-theme="light"] .t-home, .t-home { --bg: #fcfcfc; --text: #1a1a1a; --muted: #8c8c8c; --nav: #9a9a9a; --rule: #c2c2c4; --logo: #1a1a1a; --logo-sub: #b7b7b7; --invert-bg: #171717; --invert-text: #f4f4f4; --accent: #1a1a1a; } [data-theme="dark"] .t-home { --bg: #161616; --text: #f1f1f1; --muted: #8c8c8c; --nav: #7d7d7d; --rule: #545456; --logo: #ffffff; --logo-sub: #6a6a6a; --invert-bg: #050505; --invert-text: #f4f4f4; --accent: #ffffff; } /* ---- Indigo ------------------------------------------------------------ */ [data-theme="light"] .t-indigo, .t-indigo { --bg: #efeefe; --text: #100f24; --muted: #6c6a86; --nav: #84838e; --rule: #d4d2f0; --logo: #100f24; --logo-sub: #a9a7c6; --invert-bg: #1f1e2f; --invert-deep: #14132a; --invert-text: #efeefe; --invert-muted: #a3a1bd; --accent: #6155f5; --accent-on: #ffffff; --app-store: #1f1e2f; --star: #c9c6f5; } [data-theme="dark"] .t-indigo { --bg: #1b1a2b; --text: #efeefe; --muted: #9c9ab4; --nav: #807e98; --rule: #322f49; --logo: #efeefe; --logo-sub: #6f6d88; --invert-bg: #100f1e; --invert-deep: #0a0916; --invert-text: #efeefe; --invert-muted: #908ea8; --accent: #7d73ff; --accent-on: #ffffff; --app-store: #9d94ff; --star: #6155f5; } /* ---- Croissant --------------------------------------------------------- */ [data-theme="light"] .t-croissant, .t-croissant { --bg: #fdf5ea; --text: #221c12; --muted: #6f6552; --nav: #ab9c84; --rule: #ead9c0; --logo: #221c12; --logo-sub: #c4b69d; --invert-bg: #2e261a; --invert-deep: #221b11; --invert-text: #fdf5ea; --invert-muted: #b3a690; --accent: #f5821f; --accent-on: #ffffff; --star: #f0c79a; } [data-theme="dark"] .t-croissant { --bg: #241d13; --text: #fdf5ea; --muted: #b3a690; --nav: #7e715b; --rule: #3c3221; --invert-bg: #181208; --invert-deep: #100b04; --logo: #fdf5ea; --logo-sub: #7e715b; --invert-text: #fdf5ea; --invert-muted: #ad9f88; --accent: #ff962e; --accent-on: #2e261a; --star: #f5821f; } /* =========================================================================== BASE =========================================================================== */ body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 300; line-height: 1.55; font-size: clamp(1rem, 0.5vw + 0.95rem, 1.18rem); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--t), color var(--t); } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); } /* Display headings */ h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1; letter-spacing: -0.01em; } .label { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; } /* =========================================================================== SITE HEADER / NAV =========================================================================== */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; max-width: var(--container); margin-inline: auto; padding: clamp(1.5rem, 3vw, 2.6rem) var(--pad) 0; } .site-header .brand { display: inline-flex; align-items: center; color: var(--logo); text-decoration: none; } .site-header .spacer { flex: 1; } /* "aniline" wordmark drawn from the logo SVG as a mask, so it follows --logo */ .logo-mark { display: block; width: 116px; height: 26px; background: var(--logo); -webkit-mask: url(../assets/img/logo-mark.svg) left center / contain no-repeat; mask: url(../assets/img/logo-mark.svg) left center / contain no-repeat; transition: background var(--t); } .nav { display: flex; align-items: center; gap: clamp(1.1rem, 3vw, 2.2rem); } .nav a { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.82rem; text-decoration: none; color: var(--nav); transition: color var(--t); } .nav a:hover { color: var(--text); } /* Theme toggle */ .theme-toggle { appearance: none; background: transparent; border: 0; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; color: var(--nav); border-radius: 50%; transition: color var(--t), background var(--t); } .theme-toggle:hover { color: var(--text); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* =========================================================================== HOME PAGE =========================================================================== */ .home-hero { text-align: center; padding: clamp(4rem, 14vw, 11rem) var(--pad) clamp(2.5rem, 6vw, 4.5rem); } /* Two-tone lockup: light/dark SVG variants swapped by theme (no inline SVG). */ .home-hero .logo-lockup { display: block; width: clamp(180px, 24vw, 300px); margin: 0 auto; } .logo-lockup img { display: block; width: 100%; height: auto; } .logo-lockup .ll-dark { display: none; } [data-theme="dark"] .logo-lockup .ll-light { display: none; } [data-theme="dark"] .logo-lockup .ll-dark { display: block; } .home-lead { color: var(--muted); font-size: clamp(1.1rem, 0.7vw + 1rem, 1.45rem); line-height: 1.5; padding-block: clamp(1rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem); } hr.lead-rule { margin: 0; } /* Product card (home) */ .pcard { padding-block: clamp(2.5rem, 6vw, 4rem); } .pcard + .pcard { padding-top: clamp(2rem, 5vw, 3.5rem); } .pcard .phones { display: flex; justify-content: center; align-items: flex-end; gap: clamp(0.75rem, 3vw, 2.5rem); margin-bottom: clamp(2rem, 5vw, 3.5rem); } .pcard .phones img { width: clamp(120px, 19vw, 220px); height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.10)); } .pcard .grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 5vw, 4rem); row-gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; } .pcard .copy { align-self: start; } .pcard .head { display: flex; align-items: baseline; justify-content: space-between; grid-column: 1 / -1; } .pcard .head h2 { font-size: clamp(2.4rem, 7vw, 4rem); color: var(--text); } .pcard .head .year { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--logo-sub); letter-spacing: 0.02em; } .pcard .copy { color: var(--muted); } .pcard .copy p { margin: 0; } .pcard .links { display: flex; gap: clamp(1.5rem, 3vw, 2.4rem); align-items: center; } .pcard .links.right { justify-content: flex-end; } .pcard a.ui-link { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.1rem); text-decoration: none; color: var(--muted); transition: color var(--t); } .pcard a.ui-link:hover { color: var(--text); } .pcard a.ui-link.accent { color: var(--accent); } .pcard a.ui-link.accent:hover { filter: brightness(1.08); } .rule, .section-rule { border: 0; border-top: 2px solid var(--rule); } .pcard .rule { margin: clamp(2rem, 5vw, 3.5rem) 0 0; } /* per-card accent override (home cards) */ .pcard.is-indigo { --accent: #6155f5; } .pcard.is-croissant { --accent: #f5821f; } /* =========================================================================== PRODUCT PAGES =========================================================================== */ .prod-hero { text-align: center; padding: clamp(2.5rem, 7vw, 6rem) var(--pad) clamp(2.5rem, 6vw, 4.5rem); } /* inline-block shrinks to the wordmark's width so the meta row can align to its edges */ .prod-hero .hero-lockup { display: inline-block; max-width: 100%; } .prod-hero .wordmark { display: block; font-family: var(--font-display-wide); font-weight: 700; text-transform: uppercase; color: var(--text); font-size: clamp(2.8rem, 12vw, 10.5rem); line-height: 0.9; letter-spacing: -0.005em; } .prod-hero .meta-row { width: 100%; margin-top: clamp(0.5rem, 1.6vw, 1rem); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .prod-hero .meta-row .platforms { color: var(--muted); font-size: 0.9rem; } .prod-hero .meta-row .app-store { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; text-decoration: none; color: var(--app-store, var(--accent)); } .prod-hero .meta-row .app-store:hover { filter: brightness(1.12); } .prod-lead { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4rem); } .prod-lead p { max-width: 760px; margin: 0; font-size: clamp(1.1rem, 0.6vw + 1rem, 1.4rem); } /* Inverted (dark band) sections */ .band { background: var(--invert-bg); color: var(--invert-text); transition: background var(--t), color var(--t); } .band h2 { color: var(--invert-text); } .band .lead-copy { color: var(--invert-muted); } .section-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); } .section-head h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin-bottom: 1rem; } .section-head .lead-copy { max-width: 760px; margin: 0; } /* Device showcase cluster (hero "Everywhere you need it") */ .showcase { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(-40px, -3vw, 0px); padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; min-height: 0; } .showcase img { width: clamp(150px, 24vw, 290px); height: auto; filter: drop-shadow(0 26px 45px rgba(0,0,0,0.45)); } .showcase img:nth-child(1) { transform: translateY(34px) translateX(28px) rotate(-1deg); opacity: 0.96; } .showcase img:nth-child(2) { transform: translateY(8px); z-index: 2; } .showcase img:nth-child(3) { transform: translateY(46px) translateX(-26px) rotate(1deg); z-index: 3; } .band .showcase { margin-top: clamp(1.5rem, 4vw, 3rem); } .band.everywhere { padding-bottom: clamp(3rem, 7vw, 5rem); } /* Feature row */ .features { padding-block: clamp(3rem, 8vw, 6rem); } .features .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .feature .shot { display: flex; justify-content: center; margin-bottom: clamp(1.2rem, 3vw, 2rem); } .feature .shot img { width: clamp(150px, 19vw, 230px); height: auto; filter: drop-shadow(0 16px 28px rgba(0,0,0,0.14)); } .feature h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--text); margin-bottom: 0.7rem; } .feature p { margin: 0; color: var(--muted); font-size: 1rem; } /* Ratings band */ .ratings { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); } .stars { display: flex; justify-content: center; gap: clamp(0.5rem, 2vw, 1.4rem); margin-bottom: 1.4rem; } .stars svg { width: clamp(44px, 8vw, 96px); height: auto; color: var(--star); } .ratings .avg { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.5vw, 2.4rem); color: var(--invert-muted); letter-spacing: -0.01em; } .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 4vw, 3.5rem); text-align: left; margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(1rem,3vw,2rem); } .quote { position: relative; padding-top: 2.4rem; color: var(--invert-text); } .quote::before { content: "\201C"; position: absolute; top: -0.6rem; left: -0.2rem; font-family: var(--font-body); font-size: 4rem; line-height: 1; color: var(--invert-muted); opacity: 0.55; } .quote p { margin: 0; font-size: 1.02rem; line-height: 1.5; } /* Pull quotes */ .pulls { padding-block: clamp(3rem, 8vw, 6rem); } .pulls .pull { max-width: 760px; margin-inline: auto; } .pulls .pull + .pull { margin-top: clamp(2.5rem, 6vw, 4.5rem); } .pulls blockquote { margin: 0; font-size: clamp(1.05rem, 0.5vw + 1rem, 1.3rem); line-height: 1.55; } .pulls cite { display: block; margin-top: 1rem; font-style: normal; font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem; color: var(--text); } /* =========================================================================== FOOTER =========================================================================== */ .site-footer { border-top: var(--rule-w) solid var(--rule); margin-top: clamp(2rem, 5vw, 4rem); } .site-footer .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; padding-block: clamp(2rem, 4vw, 3rem); } .site-footer .brand { color: var(--logo); } .site-footer .brand svg { height: 22px; width: auto; } .site-footer .foot-nav { display: flex; gap: 1.6rem; flex-wrap: wrap; } .site-footer small { color: var(--muted); font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.02em; } /* =========================================================================== RESPONSIVE =========================================================================== */ @media (max-width: 760px) { .pcard .phones img { width: clamp(96px, 27vw, 150px); } .features .grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 3.5rem); } .feature .shot { height: auto; } .feature .shot img { width: clamp(170px, 55vw, 240px); } .quotes { grid-template-columns: 1fr; gap: 2.6rem; } .showcase { gap: 0; max-width: 100%; } .showcase img { width: clamp(98px, 28vw, 160px); } .showcase img:nth-child(1) { transform: translateY(24px) translateX(14px) rotate(-1deg); } .showcase img:nth-child(3) { transform: translateY(30px) translateX(-14px) rotate(1deg); } } @media (max-width: 560px) { .pcard .grid { grid-template-columns: 1fr; } .pcard .head { flex-direction: row; } .pcard .links.right { justify-content: flex-start; } .pcard .copy.right { margin-top: 0; } /* Bigger wordmark on phones; keep the meta row edge-aligned like desktop by shrinking the small labels so the row fits within the wordmark's width. Sized per product so the (longer) Croissant wordmark doesn't overflow. */ .t-indigo .prod-hero .wordmark { font-size: clamp(3.4rem, 20vw, 6.5rem); } .t-croissant .prod-hero .wordmark { font-size: clamp(2.3rem, 12.5vw, 4.6rem); } .prod-hero .meta-row { gap: 0.5rem; margin-top: 0.4rem; } .prod-hero .meta-row .platforms, .prod-hero .meta-row .app-store { font-size: clamp(0.56rem, 2.3vw, 0.78rem); letter-spacing: 0.03em; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }