/* OCCASION — site styles. The palette is the app's own, not an approximation. The accents are the `classic` theme's `accentComponents` from AccentTheme.swift; the washes and card surfaces are what PlannerPalette.derived() produces from those accents, computed rather than eyeballed. If the app's classic accent changes, recompute these — the derivation is saturation multipliers and a fixed brightness per surface, documented in PlannerPalette. The brand has two voices on purpose. Theme.swift sets display text in a serif for the wedding app and a rounded sans for the event one, and the splash wordmark takes whichever the product uses — so "Occasion" is not one face here either. The hub speaks in the serif; each product page adopts its own. */ :root { /* The brand ground: a soft warm white, neutral between crimson and teal so neither product's world has to be toned down to sit next to the other. Warm, but only just — a full parchment field read as brown next to two saturated product worlds and pulled the whole page towards tan. The accent is the gold both app icons already share: the second ring on the wedding mark, the tick on the event one. `--accent` is that gold deepened far enough to carry as body text on white. On dark it is the icons' own value, which needs no deepening to read. */ --field-top: #FEFDFB; --field-bottom: #F6F4EF; --card: #FFFFFF; --inset: #F2F0EA; --ink: #1F1E1C; --body: rgba(31, 30, 28, 0.78); --dim: rgba(31, 30, 28, 0.55); --line: rgba(31, 30, 28, 0.11); --accent: #8A6A15; --accent-soft: rgba(213, 172, 79, 0.16); --glow: #EFCE75; --display: var(--serif); --serif: ui-serif, "New York", Georgia, "Times New Roman", serif; --rounded: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", system-ui, sans-serif; --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; /* The plan-document voice: table names, seat counts, eyebrows, the store line. A planner's working documents are set in whatever the venue's printer had; a mono at small sizes is the closest honest equivalent, and it keeps labels visibly separate from prose. */ --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; --radius: 18px; --radius-sm: 12px; } /* Each product's colour world. Set on for a product page, and on the individual cards on the hub, so both apps can appear on one page without either being compromised — the same rule createful-apps-web uses for its deck. */ [data-world="wedding"] { --field-top: #FCEEF0; --field-bottom: #F4D3D8; --card: #FFF7F8; --inset: #F0D8DB; --ink: #251A1B; --body: rgba(37, 26, 27, 0.78); --dim: rgba(37, 26, 27, 0.55); --line: rgba(173, 31, 51, 0.16); --accent: #AD1F33; --accent-soft: rgba(173, 31, 51, 0.12); --glow: #F09DA9; --display: var(--serif); } [data-world="event"] { --field-top: #EFFBFC; --field-bottom: #D5F1F4; --card: #F7FEFF; --inset: #DAEEF0; --ink: #152020; --body: rgba(21, 32, 32, 0.78); --dim: rgba(21, 32, 32, 0.55); --line: rgba(28, 115, 122, 0.16); --accent: #1C737A; --accent-soft: rgba(28, 115, 122, 0.12); --glow: #A2E9F0; --display: var(--rounded); } /* Dark, twice over: once for the system preference unless the reader forced light, once for a forced-dark choice. This mirrors the app's own System/Light/Dark setting (AppearanceMode), which is why the toggle exists at all rather than the site simply following the OS. `data-theme` is set on the ROOT and `data-world` on a descendant (body, or a panel on the hub), so every world override has to be written as a descendant of `:root:not([data-theme="light"])`. Writing it as `[data-world]:not([data-theme="light"])` looks equivalent and is not: that tests for `data-theme` on the world element itself, which never carries it, so it matches whatever the reader chose and the worlds stay dark while the chrome around them turns light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --field-top: #1A1918; --field-bottom: #111110; --card: #232221; --inset: #1C1B1A; --ink: #F5F3EF; --body: rgba(245, 243, 239, 0.76); --dim: rgba(245, 243, 239, 0.54); --line: rgba(245, 243, 239, 0.12); --accent: #E0B755; --accent-soft: rgba(224, 183, 85, 0.16); --glow: #46402F; } :root:not([data-theme="light"]) [data-world="wedding"] { --field-top: #1A1717; --field-bottom: #100E0E; --card: #2A2828; --inset: #211F1F; --ink: #F7F0F1; --body: rgba(247, 240, 241, 0.76); --dim: rgba(247, 240, 241, 0.54); --line: rgba(217, 102, 117, 0.22); --accent: #D96675; --accent-soft: rgba(217, 102, 117, 0.16); --glow: #4C3C3E; } :root:not([data-theme="light"]) [data-world="event"] { --field-top: #17191A; --field-bottom: #0E1010; --card: #282A2A; --inset: #1F2121; --ink: #EEF7F7; --body: rgba(238, 247, 247, 0.76); --dim: rgba(238, 247, 247, 0.54); --line: rgba(87, 158, 163, 0.22); --accent: #579EA3; --accent-soft: rgba(87, 158, 163, 0.16); --glow: #3E4C4C; } } :root[data-theme="dark"] { --field-top: #1A1918; --field-bottom: #111110; --card: #232221; --inset: #1C1B1A; --ink: #F5F3EF; --body: rgba(245, 243, 239, 0.76); --dim: rgba(245, 243, 239, 0.54); --line: rgba(245, 243, 239, 0.12); --accent: #E0B755; --accent-soft: rgba(224, 183, 85, 0.16); --glow: #46402F; } :root[data-theme="dark"] [data-world="wedding"] { --field-top: #1A1717; --field-bottom: #100E0E; --card: #2A2828; --inset: #211F1F; --ink: #F7F0F1; --body: rgba(247, 240, 241, 0.76); --dim: rgba(247, 240, 241, 0.54); --line: rgba(217, 102, 117, 0.22); --accent: #D96675; --accent-soft: rgba(217, 102, 117, 0.16); --glow: #4C3C3E; } :root[data-theme="dark"] [data-world="event"] { --field-top: #17191A; --field-bottom: #0E1010; --card: #282A2A; --inset: #1F2121; --ink: #EEF7F7; --body: rgba(238, 247, 247, 0.76); --dim: rgba(238, 247, 247, 0.54); --line: rgba(87, 158, 163, 0.22); --accent: #579EA3; --accent-soft: rgba(87, 158, 163, 0.16); --glow: #3E4C4C; } * { box-sizing: border-box; } /* Keyboard focus has to be visible on every surface the page has, including the two product worlds and the coloured CTA, so it is drawn as an offset ring in the ink colour rather than the accent — the one token that always contrasts with whatever it lands on. */ :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; } .cta:focus-visible { outline-offset: 4px; } body { margin: 0; background: linear-gradient(var(--field-top), var(--field-bottom)) fixed; color: var(--body); font-family: var(--text); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; } a { color: var(--accent); } /* ---- The lockup ---- `Occasion` in the display face of whichever world the page is in, with the product descriptor beside it — the same two-line arrangement the splash uses (brand at 44pt, descriptor at 13pt beneath). */ .lockup { display: inline-flex; align-items: baseline; gap: 9px; font-family: var(--display); font-weight: 500; font-size: 25px; color: var(--ink); letter-spacing: 0.01em; text-decoration: none; } .lockup span { font-family: var(--text); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); } /* ---- Chrome ---- */ header.bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0 8px; flex-wrap: wrap; } header.bar nav { display: flex; align-items: center; gap: 20px; } header.bar nav a { color: var(--dim); text-decoration: none; font-size: 15px; } header.bar nav a:hover, header.bar nav a[aria-current="page"] { color: var(--ink); } .theme-toggle { border: 1px solid var(--line); background: var(--card); color: var(--dim); border-radius: 999px; width: 34px; height: 34px; font-size: 15px; cursor: pointer; line-height: 1; } .theme-toggle:hover { color: var(--ink); } html:not(.js) .theme-toggle { display: none; } /* ---- Hero ---- */ /* ---- Hero ---- The room is the thesis. Every planner app shows a phone; this shows the thing the app makes — a floor plan, in the app's own vocabulary of round tables, a one-sided top table and a dance floor (SeatingItemKind). The seat count under it is the number the diagram actually draws. */ .hero { padding: 52px 0 30px; } @media (min-width: 900px) { .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 60px; align-items: center; } } .hero-copy > :first-child { margin-top: 0; } .hero-room { margin: 34px 0 0; } @media (min-width: 900px) { .hero-room { margin: 0; } } .room-caption { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin: 14px 0 0; text-align: center; } .room { display: block; width: 100%; height: auto; overflow: visible; } .room .cloth { fill: var(--inset); stroke: var(--line); stroke-width: 1.5; } .room .floor { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 5 6; } .room .tlabel, .room .flabel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; fill: var(--dim); text-anchor: middle; } /* Taken and free read as filled and outlined, the way the app's seat badges do — so "18 of 24 seated" is legible from the drawing, not just the label. */ .room .seat { fill: var(--card); stroke: var(--accent); stroke-width: 1.5; opacity: 0.5; } .room .seat.taken { fill: var(--accent); stroke: none; opacity: 1; } /* One orchestrated arrival: the room is laid out, then it fills, seat by seat, in the order the tables were drawn. Only transform is animated, so the taken/free opacity difference survives it. */ html.js .room .cloth, html.js .room .floor, html.js .room .tlabel, html.js .room .flabel { animation: room-in 0.6s ease backwards; } html.js .room .seat { transform-box: fill-box; transform-origin: center; animation: seat-in 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; animation-delay: calc(260ms + var(--i) * 42ms); } @keyframes room-in { from { opacity: 0; } } @keyframes seat-in { from { transform: scale(0); } } @media (prefers-reduced-motion: reduce) { html.js .room .cloth, html.js .room .floor, html.js .room .tlabel, html.js .room .flabel, html.js .room .seat { animation: none; } } .hero h1 { font-family: var(--display); font-weight: 600; color: var(--ink); font-size: clamp(38px, 7vw, 62px); line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 20px; } .lede { font-size: clamp(18px, 2.3vw, 21px); line-height: 1.55; max-width: 44ch; margin: 0 0 18px; } .eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11.5px; font-weight: 500; color: var(--accent); margin: 0 0 12px; } .store-name, .lockup span, .room-caption { font-family: var(--mono); } /* ---- Call to action ---- Deliberately not Apple's badge artwork: their guidelines forbid recreating or modifying it, and hand-drawing something close enough to pass would breach them. This is the site's own pill with honest link text. */ .cta { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; padding: 13px 26px; border-radius: 999px; margin-top: 6px; } .cta:hover { filter: brightness(1.08); } .cta.ghost { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); } .store-name { font-size: 14px; color: var(--dim); margin: 12px 0 0; } /* ---- Sections ---- */ section { padding: 40px 0; } section h2 { font-family: var(--display); font-weight: 600; color: var(--ink); font-size: clamp(26px, 3.6vw, 34px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 14px; } section h3 { font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 20px; margin: 28px 0 8px; } /* A section is a heading and its evidence. Below 900px they stack, which is the phone reading order anyway; above it they sit side by side, so the page uses the desktop width instead of leaving a third of it empty — while each column keeps a sane measure of its own. A policy set across the full 1080px would be a 115-character line, which is exactly the sort of unreadable that makes people scroll past a privacy page rather than read it. */ @media (min-width: 900px) { .split { display: grid; grid-template-columns: 20rem 1fr; gap: 20px 56px; align-items: start; } .split > .sec-head { position: sticky; top: 34px; } /* Side by side the column gap is the separation, so the heading needs no trailing space of its own. Stacked, it very much does. */ .split > .sec-head h2 { margin-bottom: 0; } } .sec-head h2 { margin-bottom: 16px; } .sec-body > :first-child { margin-top: 0; } /* ---- Cards and grids ---- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } /* The feature list carried an emoji per item, which is the one thing on the page that could have been dropped into any product's site. Typography does the work instead: a rule, the name in the display face, the sentence under it. Nothing to misread, nothing borrowed. */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 26px 30px; } .feature { border-top: 1.5px solid var(--accent); padding-top: 12px; } .feature b { display: block; font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 17.5px; margin-bottom: 4px; } .feature span { display: block; font-size: 15px; color: var(--dim); line-height: 1.5; } /* ---- The two product panels on the hub ---- Each carries its own world, so the crimson and the teal sit side by side at full strength rather than meeting in the middle. */ .apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .app-panel { background: linear-gradient(var(--field-top), var(--field-bottom)); border: 1px solid var(--line); border-radius: 24px; padding: 30px 26px 26px; color: var(--body); display: flex; flex-direction: column; } .app-panel h2 { font-family: var(--display); color: var(--ink); font-size: 27px; margin: 0 0 4px; } .app-panel .descriptor { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); font-weight: 600; margin: 0 0 14px; } .app-panel p { margin: 0 0 16px; } .app-panel ul { list-style: none; padding: 0; margin: 0 0 22px; font-size: 15.5px; } .app-panel li { padding: 6px 0 6px 22px; position: relative; color: var(--body); } .app-panel li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .app-panel .cta { margin-top: auto; align-self: flex-start; } /* The icon mark is the shipped app icon itself, exported from the asset catalog — not a redrawing of it. iOS applies the rounded mask at display time and the source PNG is square, so the corner radius is applied here. Apple's ratio is a continuous curve at roughly 22.5% of the width; a plain border-radius is the closest CSS gets without a mask image. */ .mark { width: 68px; height: 68px; border-radius: 15px; display: block; margin-bottom: 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); } .hero .mark { width: 76px; height: 76px; border-radius: 17px; margin-bottom: 22px; } /* ---- Prose pages (privacy, support, terms) ---- Same width and the same two-column split as the landing pages: the section heading in the rail, its text beside it. */ .doc { padding: 46px 0 4px; } .doc h1 { font-family: var(--display); font-weight: 600; color: var(--ink); font-size: clamp(30px, 5vw, 42px); line-height: 1.12; margin: 0 0 10px; } .doc .updated { color: var(--dim); font-size: 15px; max-width: 62ch; margin: 0 0 26px; } .doc .note { max-width: 62ch; } .doc-sec { padding: 30px 0; border-top: 1px solid var(--line); } .doc-sec:last-of-type { padding-bottom: 56px; } .doc-sec h2 { font-size: 23px; margin-top: 0; } .doc-sec .sec-body h3 { font-size: 17.5px; margin: 24px 0 6px; } .doc-sec .sec-body > :first-child { margin-top: 0; } .doc-sec p, .doc-sec li { margin: 0 0 14px; } .doc-sec ul, .doc-sec ol { padding-left: 20px; margin-top: 0; } .doc-sec li { margin-bottom: 8px; } .doc-sec dt { font-weight: 600; color: var(--ink); margin-top: 16px; } .doc-sec dd { margin: 4px 0 0; } /* An anchored heading must not land under the sticky rail's top offset. */ .doc-sec[id] { scroll-margin-top: 24px; } .note { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 18px; margin: 0 0 20px; } .note p { margin: 0; } /* ---- Footer ---- */ footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 0 50px; font-size: 14.5px; color: var(--dim); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } footer a { color: var(--dim); text-decoration: none; } footer a:hover { color: var(--ink); } footer nav { display: flex; gap: 18px; flex-wrap: wrap; } /* ---- Reveal on scroll ---- Only ever applied when JavaScript is running: without it the class is never added and everything is simply visible. */ html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; } html.js .reveal.seen { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }