/* Sunny — the landing page at the site root (index.html).
*
* Deliberately separate from style.css, which privacy.html, terms.html and support.html
* use and which Tools/build_web.py regenerates around. Nothing here can disturb those.
*
* Layout follows a reference the founder chose (erly.co): sticky header, split hero
* with tilted phones, a numbered three-step band, a four-up feature row, an FAQ
* accordion and a two-column footer. The type scale, palette and copy are Sunny's own.
*/
/* ---- Tokens ------------------------------------------------------------- */
/* Values are the app's own, from Sunny/DesignSystem/Tokens.swift, so the site and
* the product cannot drift into different greys. */
:root {
--ink: #000000;
--ink-2: #6E6E6E;
--ink-3: #9A9A9A;
--bg: #FFFFFF;
--card: #F3F3F3;
--card-2: #FAFAFA;
--line: #E2E2E2;
--accent: #FF7A1A;
--bezel: #1C1C1E;
--page: 1180px;
--gutter: clamp(20px, 5vw, 40px);
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Sans",
"Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
/* The hero phones are rotated and translated, and a rotated box occupies a wider
bounding box than its layout box. At some viewport widths that reaches past the
edge; clipping it costs nothing here and avoids a stray horizontal scrollbar.
`clip` rather than `hidden`: `hidden` on makes it a scroll container in
some browsers, which breaks `position: sticky` on the header. */
overflow-x: clip;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 17px;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
font-feature-settings: "palt" 1;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 {
margin: 0;
font-weight: 800;
line-height: 1.14;
letter-spacing: -0.028em;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.skip {
position: absolute; left: -9999px;
background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px;
}
.skip:focus { left: 16px; top: 16px; z-index: 100; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* ---- Shared ------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--page);
margin-inline: auto;
padding-inline: var(--gutter);
}
section { padding-block: clamp(72px, 11vw, 140px); }
.eyebrow {
display: inline-block;
background: var(--card);
color: var(--ink-2);
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0;
padding: 0.42em 1.1em;
border-radius: 999px;
}
.section-head { text-align: center; max-width: 760px; margin-inline: auto; }
.section-head h2 {
font-size: clamp(2rem, 4.6vw, 3.3rem);
margin-top: 22px;
}
.section-head .sub {
color: var(--ink-2);
font-size: 1.06rem;
margin-top: 20px;
}
/* ---- Wordmark ----------------------------------------------------------- */
.wordmark {
display: inline-flex;
line-height: 1;
align-items: center;
gap: 9px;
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
text-decoration: none;
color: var(--ink);
}
/* The sunrise mark, lifted from the shipped app icon rather than redrawn.
*
* It was an inline SVG of a sun with rays over a straight horizon, which is not what
* Sunny's icon is: a sun sitting behind a long S-curved horizon, no rays, 2.44:1 rather
* than square. `Web/img/mark.png` is that shape, extracted from
* Sunny/Resources/.../icon-1024.png as an alpha mask, so it cannot drift from the icon
* the App Store shows.
*
* Painted as a mask over `currentColor` rather than dropped in as an ![]()
, so the mark
* takes the wordmark's ink colour and stays one colour with the text beside it.
*/
.wordmark .mark {
width: 44px;
aspect-ratio: 320 / 131;
flex: none;
background: currentColor;
-webkit-mask: url("img/mark.png") center / contain no-repeat;
mask: url("img/mark.png") center / contain no-repeat;
}
/* Without masking, `background: currentColor` above would paint a solid black bar where
* the logo goes — a worse failure than any mark at all. The PNG is already black with
* an alpha channel, so drawing it directly is the same picture by another route. */
@supports not (mask: url("img/mark.png")) {
.wordmark .mark {
background: url("img/mark.png") center / contain no-repeat;
}
}
/* ---- App Store button --------------------------------------------------- */
/*
* Apple's own badge artwork, the Japanese one, taken from their marketing resources
* (`Download_on_the_App_Store_Badge_JP_RGB_blk`). It replaced a hand-drawn stand-in --
* a black pill with an Apple glyph and the words set in Inter -- which was close enough
* to read as the badge and wrong enough to look like a knock-off.
*
* Apple's guidelines: do not redraw it, do not recolour it, keep clear space around it
* of at least a quarter of its height, and never render it under 40px tall on the web.
* Hence sizes below rather than any restyling.
*/
.store {
display: inline-block;
line-height: 0;
transition: transform .15s ease, opacity .15s ease;
}
.store:hover { transform: translateY(-1px); opacity: .85; }
.store img { height: 54px; width: auto; }
/* ---- Phone mockup ------------------------------------------------------- */
/*
* The frame is `Tools/appstore/frame.py`, which draws the device with the same code as
* the App Store screenshots: titanium rail, side buttons, bezel, Dynamic Island. One
* transparent overlay, 8 KB, shared by every phone on the page; each screenshot sits
* behind it in the punched-out screen.
*
* It replaced a rounded rectangle drawn in CSS with the screenshot inset by percentages
* -- which, because a percentage inset resolves against height for top/bottom and width
* for left/right, gave a top bezel four times the sides and corners that did not follow
* the frame. It looked like a screenshot pasted onto a black shape, because it was one.
*
* **Every number below comes from frame.py's output.** Re-run it and paste the new
* geometry if the frame is ever redrawn; the hole and the screenshot behind it have to
* agree to the pixel or the bezel shows a seam.
*/
.phone {
position: relative;
aspect-ratio: 648 / 1330;
/* `drop-shadow` rather than `box-shadow`: this box is transparent outside the phone's
* silhouette, and box-shadow would cast a rectangle behind it. */
filter: drop-shadow(0 26px 40px rgba(0,0,0,.22)) drop-shadow(0 6px 14px rgba(0,0,0,.12));
}
.phone .screen {
position: absolute;
left: 4.167%;
top: 1.729%;
width: 91.667%;
height: 96.541%;
overflow: hidden;
border-radius: 12.654% / 6.165%;
background: #000;
}
.phone .screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
/* ---- Header ------------------------------------------------------------- */
.masthead {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255,255,255,.86);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid transparent;
}
.masthead .wrap {
display: flex;
align-items: center;
gap: 24px;
padding-block: 16px;
}
.masthead nav {
display: flex;
gap: 34px;
margin-inline: auto;
font-size: 1rem;
font-weight: 500;
}
.masthead nav a { text-decoration: none; color: var(--ink-2); transition: color .15s ease; }
.masthead nav a:hover { color: var(--ink); }
.masthead .store img { height: 40px; }
/* ---- Hero --------------------------------------------------------------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(72px, 10vw, 130px); }
.hero .wrap {
display: grid;
grid-template-columns: 1.02fr 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.badge-line {
display: inline-flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 8px 18px 8px 14px;
font-size: 0.95rem;
font-weight: 500;
box-shadow: 0 2px 10px -4px rgba(0,0,0,.10);
}
.badge-line svg { width: 19px; height: 19px; color: var(--accent); flex: none; }
.hero h1 {
font-size: clamp(2.05rem, 4.5vw, 3.5rem);
margin-top: 30px;
/* Keep the line breaks where the
puts them. */
text-wrap: balance;
}
.hero .lede {
color: var(--ink-2);
font-size: clamp(1.02rem, 1.35vw, 1.16rem);
margin-top: 28px;
max-width: 30em;
}
.hero .cta { margin-top: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.hero-art { display: flex; align-items: center; justify-content: center; }
/* The pair should clear the fold on a laptop, and on a laptop the constraint is height,
* not width. A rotated phone's bounding box is about 2.17x its width, and the space
* above the fold is the viewport less the header (78px) and the hero's top padding —
* so `46vh - 88px` is the widest phone that still fits. It only bites on short
* viewports: at 800px tall it lands on the same 47% the width rule already gives. */
.hero-art .phone { width: min(47%, calc(46vh - 88px)); }
.hero-art .phone:first-child { rotate: -8deg; translate: 0 4%; z-index: 1; }
.hero-art .phone:last-child { rotate: 6deg; translate: -7% -5%; z-index: 2; }
/* ---- Steps -------------------------------------------------------------- */
.steps .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(22px, 3vw, 40px);
margin-top: clamp(48px, 6vw, 84px);
}
.step-card {
position: relative;
background: var(--card);
border-radius: 22px;
padding: clamp(30px, 3.4vw, 52px) clamp(26px, 3vw, 46px) 0;
overflow: hidden;
}
.step-card .phone { width: 100%; }
.step-num {
position: absolute;
top: 18px; left: 18px;
width: 38px; height: 38px;
display: grid; place-items: center;
background: var(--ink);
color: #fff;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0;
}
.step h3 { font-size: 1.4rem; margin-top: 30px; }
.step p { color: var(--ink-2); margin-top: 14px; font-size: 1rem; }
/* ---- Features ----------------------------------------------------------- */
.features .grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(24px, 3vw, 44px);
margin-top: clamp(48px, 6vw, 84px);
}
.tile {
width: 52px; height: 52px;
display: grid; place-items: center;
background: var(--card);
border-radius: 14px;
}
.tile svg { width: 23px; height: 23px; color: var(--ink); }
.feature h3 { font-size: 1.2rem; margin-top: 26px; letter-spacing: -0.02em; }
.feature p { color: var(--ink-2); margin-top: 13px; font-size: 0.98rem; }
/* ---- FAQ ---------------------------------------------------------------- */
.faq .list {
max-width: 820px;
margin: clamp(44px, 5vw, 70px) auto 0;
border-top: 1px solid var(--line);
}
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
padding: 26px 22px;
cursor: pointer;
font-size: 1.12rem;
font-weight: 700;
letter-spacing: -0.015em;
list-style: none;
transition: background .15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--card-2); }
.faq summary svg {
width: 20px; height: 20px; flex: none;
color: var(--ink-2);
transition: rotate .2s ease;
}
.faq details[open] summary svg { rotate: 180deg; }
.faq .answer { padding: 0 22px 28px; color: var(--ink-2); max-width: 64ch; }
.faq .answer a { color: var(--ink); text-underline-offset: 3px; }
/* ---- Footer ------------------------------------------------------------- */
footer { border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 88px) 40px; }
footer .top { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
footer .cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 190px));
gap: 40px;
margin-top: clamp(44px, 5vw, 64px);
}
footer .cols h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
footer .cols ul { margin-top: 18px; display: grid; gap: 13px; }
footer .cols a { color: var(--ink-2); text-decoration: none; transition: color .15s ease; }
footer .cols a:hover { color: var(--ink); }
footer .base {
margin-top: clamp(44px, 5vw, 64px);
padding-top: 30px;
border-top: 1px solid var(--line);
text-align: center;
color: var(--ink-3);
font-size: 0.9rem;
}
/* ---- Narrow ------------------------------------------------------------- */
@media (max-width: 940px) {
.hero .wrap { grid-template-columns: 1fr; }
/* `width: 100%` is load-bearing, not tidiness. A grid item with auto inline margins
does not stretch, so it sizes to its content — and its content is two phones sized
as a percentage *of it*. That circularity resolves to zero, and the hero image
silently vanished on every phone-width viewport while desktop looked fine. */
.hero-art { order: -1; width: 100%; max-width: 420px; margin-inline: auto; }
.hero-art .phone { width: 43%; }
.hero-art .phone:first-child { rotate: -6deg; }
.hero-art .phone:last-child { rotate: 5deg; translate: -6% -4%; }
.steps .grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.features .grid { grid-template-columns: repeat(2, 1fr); }
.masthead nav { display: none; }
}
@media (max-width: 560px) {
body { font-size: 16px; }
.features .grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
.masthead .store img { height: 40px; } /* Apple's floor for web is 40px */
.hero .cta .store img { height: 50px; }
footer .cols { grid-template-columns: 1fr; gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; }
}