/* Pick Sense from Nonsense — shared design system. Extracted from index.html so every page (homepage, editions, login) shares one source of truth. No build step: plain CSS, linked from each page. */ :root { /* Brand palette — rooted in the Barbadian landscape */ --cane: #2C857A; /* primary — cane green: strength, growth */ --cane-dark: #226B62; /* darker cane — meets WCAG AA on --pale, unlike --cane (3.87:1) */ --coral: #CB5A2C; /* accent — bajan coral: clay pots, sunset */ --coral-dark: #a8431a; /* pressed/urgent coral — meets WCAG AA with parchment text, unlike --coral */ --gold: #D9962B; /* highlight — rum gold: celebration */ --parchment: #FBF7F0; /* background — old paper, memory, story */ --ink: #213D38; /* text — dark rum: barrel wood */ --sea: #A8D5CB; /* secondary — sea glass: sea, air */ --tamarind: #8B7358; /* neutral — chattel house wood */ --cream: #F5E4BC; /* warm fill — breadfruit */ --flag: #003F87; /* patriotic accent — pride moments only */ --pale: #E7F2EE; /* light surface — pale cane */ --card: #FFFFFF; --ink-soft: #4E6B64; --display: 'Playfair Display', Georgia, serif; /* sayings + section headings */ --body: 'DM Sans', system-ui, -apple-system, sans-serif; /* body copy */ --label: 'DM Sans', system-ui, sans-serif; /* labels / nav (all caps) */ --quote: 'Lora', Georgia, serif; /* pull quotes, cultural notes */ } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--body); font-size: 17px; background: var(--parchment); color: var(--ink); min-height: 100vh; } html { font-size: 112.5%; scroll-padding-top: 60px; scroll-behavior: smooth; } /* ---- sticky top navigation (StoryPeople-style) ---- .sticky-head wraps the urgency bar + nav together so the pair sticks as one unit. Two independent `position: sticky; top: 0` siblings would each pin to the viewport top on their own and overlap once both are stuck — wrapping avoids that without hardcoding the banner's height. */ .sticky-head { position: sticky; top: 0; z-index: 50; } .topnav { display: flex; align-items: center; gap: 1rem; background: var(--cane); color: var(--parchment); padding: .55rem 1rem; border-bottom: 3px solid var(--gold); } .topnav .brand { display: inline-flex; align-items: center; text-decoration: none; border-left: 2px solid var(--coral); padding-left: .55rem; /* compact nod to the coral rule */ } .topnav .brand .brand-name { font-family: var(--display); font-style: italic; font-weight: 700; color: var(--parchment); line-height: .9; font-size: .92rem; white-space: nowrap; } .topnav .brand .brand-name span { display: block; } .nav-toggle { display: none; margin-left: .25rem; background: none; border: 1.5px solid var(--parchment); color: var(--parchment); border-radius: 6px; font-size: 1.1rem; padding: .15rem .55rem; cursor: pointer; } .nav-actions { display: flex; align-items: center; gap: .35rem; } .icon-btn { background: none; border: none; color: var(--parchment); cursor: pointer; padding: .35rem; border-radius: 6px; display: inline-flex; line-height: 0; position: relative; } .icon-btn:hover { background: rgba(255,255,255,.12); } .icon-btn svg { width: 20px; height: 20px; display: block; } .cart-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 3px; background: var(--coral); color: var(--parchment); border-radius: 999px; font: 600 10px/16px var(--label); text-align: center; } .cart-badge[hidden] { display: none; } .nav-menu { list-style: none; display: flex; gap: .2rem; margin: 0 auto 0 .5rem; padding: 0; } .has-drop { position: relative; } .nav-link { font-family: var(--label); font-weight: 500; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; background: none; border: none; color: var(--parchment); cursor: pointer; padding: .5rem .7rem; border-radius: 6px; } .nav-link:hover { background: rgba(255,255,255,.12); } .drop { display: none; position: absolute; top: 100%; left: 0; min-width: 190px; background: var(--card); color: var(--ink); border: 1px solid #e7ddc9; border-radius: 10px; padding: .4rem; box-shadow: 0 10px 26px rgba(42,31,20,.18); z-index: 60; } .has-drop:hover .drop, .has-drop.open .drop { display: block; } .drop a { display: block; padding: .45rem .6rem; border-radius: 6px; font-family: var(--body); font-size: 16px; color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; } .drop a:hover { background: var(--pale); color: var(--cane); } .drop-wide { columns: 2; min-width: 330px; } /* islands */ .drop-wide a { break-inside: avoid; } .nav-cta { font-family: var(--label); font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; background: var(--gold); color: var(--ink); border: none; border-radius: 999px; padding: .5rem 1.1rem; cursor: pointer; white-space: nowrap; text-decoration: none; /* it's a pill, not a link — no underline */ } .nav-cta:hover { background: var(--coral); color: var(--parchment); } /* Two labels for the logged-in state (written by nav.js): the warm full greeting on desktop, a short one on phones. Swapped in CSS, not JS, so rotating the device picks the right one without a reload. Selectors are NOT scoped to .nav-cta — nav.js also writes this pair into a plain on the dashboard, and both spans would show there. */ .cta-short { display: none; } /* ---- urgency bar: Founding Edition deadline reminder, sticky above the nav site-wide (see .sticky-head). --coral-dark (not --coral) so parchment text clears WCAG AA contrast at this small a size. ---- */ .urgency-bar { background: var(--coral-dark); color: var(--parchment); text-align: center; padding: .5rem 1rem; font-family: var(--label); font-weight: 500; font-size: 13px; letter-spacing: .01em; } .urgency-bar p { max-width: 900px; margin: 0 auto; } .urgency-bar strong { font-weight: 700; } .urgency-bar.urgency-closed { background: var(--tamarind); } @media (max-width: 620px) { .urgency-bar { font-size: 11.5px; padding: .45rem .7rem; } } /* ---- hero banner ---- */ .hero { background: var(--cane); color: var(--parchment); text-align: center; padding: 3rem 1rem 0; border-bottom: 6px solid var(--gold); overflow: hidden; } .hero-inner { max-width: 720px; margin: 0 auto; } /* ---- logo wordmark system (research/Logo system — three colourway variants.csv) ---- Wordmark only, no icon: the saying is the brand. Playfair Display italic bold name, a coral horizontal rule (a "visual breath"), a tight-set descriptor, then the tagline. Three colourways via the modifier classes below — the coral rule is constant in all three. */ .logo { display: inline-block; text-align: center; } .logo .logo-name { font-family: var(--display); font-style: italic; font-weight: 700; line-height: .92; margin: 0; letter-spacing: .01em; } .logo .logo-name span { display: block; } .logo .logo-rule { width: 64%; max-width: 230px; height: 2px; margin: .55rem auto; border: 0; background: var(--coral); } .logo .logo-desc { font-family: var(--label); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .15em; } .logo .logo-tag { font-family: var(--quote); font-style: italic; font-size: 1rem; margin-top: .25rem; } /* colourways — text colours adapt to the background the lockup sits on */ .logo--cane .logo-name, .logo--darkrum .logo-name { color: var(--parchment); } .logo--cane .logo-desc, .logo--cane .logo-tag, .logo--darkrum .logo-desc, .logo--darkrum .logo-tag { color: var(--cream); } .logo--parchment .logo-name { color: var(--ink); } .logo--parchment .logo-desc, .logo--parchment .logo-tag { color: var(--tamarind); } /* hero lockup sizing */ .hero .logo { margin-bottom: .2rem; } .hero .logo .logo-name { font-size: clamp(2.4rem, 6vw, 3.6rem); } .hero .logo .logo-desc { font-size: 13px; } .hero-sub { font-family: var(--quote); font-style: italic; font-size: 1.1rem; line-height: 1.5; color: var(--cream); max-width: 36rem; margin: .6rem auto 1.4rem; } /* names the product and the price on the first screen */ .hero-product { display: inline-block; font-family: var(--label); font-size: 13.5px; letter-spacing: .02em; color: var(--ink); background: var(--parchment); border-radius: 999px; padding: .5rem 1rem; margin: .9rem 0 1rem; box-shadow: 0 2px 8px rgba(42,31,20,.14); } .welcome-text .welcome-lede { margin-top: 1.2rem; } .hero-product strong { font-family: var(--display); font-weight: 700; font-size: 1.05rem; } .hero-cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; } .btn-primary, .btn-ghost { font-family: var(--label); font-weight: 500; font-size: 13px; letter-spacing: .04em; border-radius: 999px; padding: .7rem 1.5rem; cursor: pointer; } .btn-primary { background: var(--gold); color: var(--ink); border: none; } .btn-primary:hover { background: var(--coral); color: var(--parchment); } .btn-ghost { background: transparent; color: var(--parchment); border: 1.5px solid var(--parchment); } .btn-ghost:hover { background: rgba(255,255,255,.12); } .hero-strip { display: flex; gap: .5rem; justify-content: center; max-width: 900px; margin: 1.8rem auto 0; padding: 0 .5rem; transform: translateY(6px); } .hero-strip img { width: 100%; max-width: 130px; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px 10px 0 0; border: 2px solid var(--gold); border-bottom: none; background: var(--pale); } @media (max-width: 620px) { .hero-strip img:nth-child(n+4) { display: none; } } /* ---- mobile nav ---- */ @media (max-width: 760px) { .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; /* tap-target floor */ } .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: var(--cane); padding: .5rem; border-bottom: 3px solid var(--gold); } .topnav.nav-open .nav-menu { display: flex; } /* The login CTA stays VISIBLE on mobile — do not hide it. Most readers arrive by scanning a calendar/book QR on a phone, and unlocking a meaning needs an account, so this is the primary conversion path. It also carries the logged-in state (member link + log out); hiding it left members with no way to see or end their session on a phone. */ /* min-height 44px = the accessible tap-target floor on touch screens. */ .nav-cta { font-size: 13px; padding: .45rem .8rem; min-height: 44px; display: inline-flex; align-items: center; } .nav-actions { margin-left: auto; } /* Cart: same 44px tap-target floor. The icon itself stays 20px — only the hit area grows, so the badge is nudged back in to keep hugging it. */ .icon-btn { min-width: 44px; min-height: 44px; padding: 12px; align-items: center; justify-content: center; } .cart-badge { top: 3px; right: 3px; } /* Logged-in label: nav.js renders a long form and a short form; the header has ~140px free at 375px, so the short one shows here. */ .cta-full { display: none; } /* Shrink-to-fit rather than a fixed cap: a long first name must never push the hamburger off a 360px screen. min-width:0 lets the pill give up space, and the name (not the 🌴) is what gets ellipsised. */ .topnav { gap: .5rem; } .nav-actions, .nav-cta { min-width: 0; } .cta-short { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; max-width: 100%; } .cta-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Log out lives on the dashboard on mobile — no room for it inline. */ .nav-logout { display: none; } .has-drop:hover .drop { display: none; } .has-drop.open .drop { display: block; position: static; box-shadow: none; border: none; background: rgba(255,255,255,.08); margin: .2rem 0 .4rem; } .has-drop.open .drop a { color: var(--parchment); } .has-drop.open .drop a:hover { background: rgba(255,255,255,.14); color: var(--parchment); } .drop-wide { columns: 1; min-width: 0; } } /* Small phones (iPhone SE, 320px): tighten so the CTA never wraps or pushes the hamburger off. Tap target stays >=44px tall via padding. */ @media (max-width: 380px) { .topnav { padding-left: 12px; padding-right: 12px; gap: .4rem; } .nav-cta { font-size: 12px; padding: .45rem .6rem; letter-spacing: .05em; } .nav-actions { gap: .2rem; } } /* Every common phone width (360–428). The wordmark gives up ~20px so a member's first name fits in the pill unabbreviated — at .92rem the brand left too little and even "Carolena" ellipsised to "CAROL…". Above this the header has room and the brand stays full size. */ @media (max-width: 430px) { .topnav .brand { padding-left: .4rem; } .topnav .brand .brand-name { font-size: .78rem; } } main { max-width: 1080px; margin: 0 auto; padding: 3rem 1rem 4rem; } /* ---- newsletter signup gate ---- */ /* ---- airy newsletter signup with 10%-off offer (StoryPeople-style) ---- */ #gate { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; max-width: 1080px; margin: 5rem auto; padding: 0 1.5rem; text-align: left; } .signup-media { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--pale); box-shadow: 0 18px 44px rgba(42,31,20,.18); } .signup-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .signup-eyebrow { font-family: var(--label); font-weight: 500; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--coral-dark); margin-bottom: .55rem; } .gate-offer { display: inline-block; font-family: var(--label); font-weight: 500; font-size: 12px; letter-spacing: .04em; background: var(--gold); color: var(--ink); border-radius: 999px; padding: .35rem .9rem; margin-bottom: 1rem; } #gate h2 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; margin-bottom: .7rem; } #gate .lede { line-height: 1.6; color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 1.4rem; max-width: 42ch; } #gate .lede strong { color: var(--coral); } #gate-form { display: flex; gap: .6rem; flex-wrap: wrap; } #gate input[type=email] { flex: 1; min-width: 220px; padding: .85rem 1rem; font-size: 1rem; border: 1.5px solid #d9ccaf; border-radius: 10px; font-family: inherit; background: var(--card); color: var(--ink); } #gate input[type=email]:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); } #gate button { background: var(--coral); color: var(--parchment); font-family: var(--label); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; border: none; border-radius: 10px; padding: .85rem 1.6rem; cursor: pointer; white-space: nowrap; } #gate button:hover { background: #a8431a; } #gate small { display: block; margin-top: 1rem; color: var(--tamarind); font-size: 12.5px; } #gate .gate-done { font-family: var(--quote); font-style: italic; color: var(--cane); } #gate .gate-code { font-family: var(--label); font-weight: 600; letter-spacing: .12em; background: var(--pale); border: 1px dashed var(--cane); border-radius: 8px; padding: .5rem .9rem; display: inline-block; color: var(--cane); margin: .3rem 0; } @media (max-width: 760px) { #gate { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; margin: 3.5rem auto; } #gate .lede { margin-left: auto; margin-right: auto; } #gate-form { justify-content: center; } } /* ---- two-tier explainer: Newsletter (free, ongoing) / Calendar & Book (limited) ---- The old third tier ("Future Editions") was removed: it invited the reader to wait for a later, non-founding run right beside "once it's gone, it's gone". */ .tiers { max-width: 760px; margin: 3rem auto 0; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } .tier { background: var(--card); border: 1px solid #e7ddc9; border-radius: 14px; padding: 1.3rem 1.4rem; box-shadow: 0 2px 6px rgba(42,31,20,.06); } .tier--limited { border-color: var(--coral); box-shadow: 0 4px 14px rgba(203,90,44,.12); } .tier-eyebrow { font-family: var(--label); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--coral-dark); margin-bottom: .5rem; } .tier h3 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: 1.15rem; margin-bottom: .5rem; } .tier p { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; margin-bottom: .8rem; } .tier a { font-family: var(--label); font-weight: 500; font-size: 13px; color: var(--coral-dark); text-decoration: none; } .tier a:hover { text-decoration: underline; } @media (max-width: 780px) { .tiers { grid-template-columns: 1fr; margin-top: 2rem; } } /* ---- after subscribe ---- */ /* browser is always visible now — paid editions gate per-tab, not behind a wall */ .browser-lede { max-width: 560px; margin: 0 auto; text-align: center; font-family: var(--quote); font-style: italic; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); } .tabs { display: flex; gap: .5rem; margin: 1.3rem auto .3rem; max-width: 620px; } .tabs button { flex: 1; padding: .6rem; font-family: var(--label); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; border: 2px solid var(--cane); background: var(--card); color: var(--cane); border-radius: 8px; } .tabs button.active { background: var(--cane); color: var(--parchment); } #search { display: block; width: 100%; max-width: 620px; padding: .7rem 1rem; font-size: 1rem; border: 2px solid var(--cane); border-radius: 999px; margin: 1rem auto; font-family: inherit; background: var(--card); color: var(--ink); } /* ---- StoryPeople-style art-card grid ---- */ #list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; margin-top: 1.3rem; } .carib-topic-h { grid-column: 1 / -1; margin: 1rem 0 -.2rem; font-family: var(--display); font-style: italic; font-size: 1.4rem; color: var(--cane); border-bottom: 2px solid var(--coral); padding-bottom: .3rem; } .carib-topic-h:first-child { margin-top: 0; } .story-card { background: var(--card); border: 1px solid #e7ddc9; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 6px rgba(42,31,20,.06); transition: transform .15s ease, box-shadow .15s ease; } .story-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(42,31,20,.15); } .story-card.highlight { outline: 3px solid var(--coral); outline-offset: -1px; } .story-art { aspect-ratio: 1 / 1; background: var(--pale); border-bottom: 4px solid var(--cane); overflow: hidden; } .story-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .story-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; } .story-card .day { font-family: var(--label); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--coral); } .story-card .text { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.25rem; line-height: 1.3; margin: .3rem 0 .5rem; white-space: pre-line; color: var(--ink); } .story-card .meaning { font-family: var(--body); font-size: 16px; line-height: 1.55; color: var(--ink-soft); } .story-card .meaning.pending { color: var(--tamarind); font-style: italic; } .story-card .src { display: block; margin-top: .5rem; font-family: var(--quote); font-style: italic; font-size: 13px; color: var(--tamarind); } .story-card .cat { align-self: flex-start; margin-top: .7rem; font-family: var(--label); font-weight: 500; font-size: 10px; letter-spacing: .08em; color: var(--parchment); border-radius: 999px; padding: .22rem .7rem; text-transform: uppercase; background: var(--tamarind); } /* card art accent follows the saying's category colour */ .story-card.cat-wisdom .story-art { border-bottom-color: var(--cane); } .story-card.cat-animals .story-art { border-bottom-color: var(--tamarind); } .story-card.cat-food .story-art { border-bottom-color: var(--cream); } .story-card.cat-sea .story-art { border-bottom-color: var(--sea); } .story-card.cat-weather .story-art { border-bottom-color: var(--gold); } /* Category colour scheme — canonical legend, shared with the printed calendar (see calendar/CALENDAR-SPEC.md). Coral is reserved for the "today / highlight" accent, so it is not a category colour. Light fills carry ink text for contrast. */ .cat.cat-wisdom { background: var(--cane); } /* cane green */ .cat.cat-animals { background: var(--tamarind); } /* chattel wood */ .cat.cat-food { background: var(--cream); color: var(--ink); } /* breadfruit */ .cat.cat-sea { background: var(--sea); color: var(--ink); } /* sea glass */ .cat.cat-weather { background: var(--gold); color: var(--ink); } /* rum gold */ .country-card .day { color: var(--cane); } .country-card .flag { font-size: 1.25rem; margin-right: .35rem; } /* ---- shop / pre-order section ---- */ .shop { max-width: 1080px; margin: 0 auto; padding: 4rem 1rem 1rem; } .shop h2 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: 1.8rem; text-align: center; } .shop .sub { text-align: center; font-family: var(--quote); font-style: italic; color: var(--tamarind); margin: .3rem 0 1.4rem; } .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; } .product { background: var(--card); border: 1px solid #e7ddc9; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 6px rgba(42,31,20,.06); } .product .p-art { aspect-ratio: 4 / 3; background: var(--pale); border-bottom: 4px solid var(--gold); } .product .p-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .product .p-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; } .product h3 { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--ink); } .product .p-blurb { font-family: var(--body); font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: .4rem 0 .8rem; flex: 1; } .product .p-price { font-family: var(--label); font-weight: 500; color: var(--cane); font-size: 1.05rem; margin-bottom: .7rem; } .product .p-add { font-family: var(--label); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; background: var(--cane); color: var(--parchment); border: none; border-radius: 8px; padding: .65rem; cursor: pointer; } .product .p-add:hover { background: var(--coral); } .product.pulse { animation: pulse 1.2s ease; } @keyframes pulse { 0%,100% { box-shadow: 0 2px 6px rgba(42,31,20,.06); } 30% { box-shadow: 0 0 0 4px var(--gold); } } .shop .price-note { text-align: center; font-family: var(--body); font-size: 12px; color: var(--tamarind); margin-top: 1rem; } /* ---- reservation form ---- */ .reservation-form-wrapper { max-width: 1080px; margin: 0 auto; padding: 2rem 1rem; } .reservation-form-box { background: var(--pale); border: 2px solid var(--cane); border-radius: 16px; padding: 2rem; max-width: 600px; margin: 0 auto; } .reservation-form-box h3 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: 1.4rem; margin-bottom: 1.5rem; } .reserve-form fieldset { border: none; padding: 0; margin-bottom: 1.5rem; } .reserve-form legend { font-family: var(--body); font-weight: 500; font-size: 15px; color: var(--ink); margin-bottom: 1rem; display: block; } .product-checkboxes { display: flex; flex-direction: column; gap: 1rem; } .checkbox-label { display: flex; align-items: flex-start; gap: 1rem; cursor: pointer; padding: 1rem; background: var(--card); border: 2px solid #e7ddc9; border-radius: 10px; transition: .2s; } .checkbox-label:hover { border-color: var(--cane); background: #fafaf9; } .checkbox-label input[type="checkbox"] { margin-top: .2rem; width: 20px; height: 20px; cursor: pointer; accent-color: var(--cane); } .checkbox-label input[type="checkbox"]:not(:checked) { opacity: .6; } .checkbox-label .checkbox-name { font-weight: 500; color: var(--ink); display: block; } .checkbox-label .checkbox-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.4; } .field-hint { font-size: 13.5px; color: var(--ink-soft); margin: -.6rem 0 1rem; } .edition-picks { display: flex; flex-direction: column; gap: .8rem; } .edition-pick { border: 2px solid #e7ddc9; border-radius: 10px; background: var(--card); overflow: hidden; } .edition-pick-head { display: flex; align-items: center; gap: .8rem; cursor: pointer; padding: .9rem 1rem; transition: .2s; } .edition-pick-head:hover { background: #fafaf9; } .edition-pick-head input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--cane); } .edition-pick-head span { font-weight: 500; color: var(--ink); } .edition-pick-products { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; padding: 0 1rem 1rem 2.8rem; background: var(--pale); } .checkbox-label-sm { display: flex; align-items: center; gap: .5rem; font-size: 14px; color: var(--ink); cursor: pointer; } .checkbox-label-sm input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--cane); } .selection-summary { font-size: 13.5px; color: var(--cane); font-weight: 500; margin-top: .8rem; line-height: 1.5; } .success-items { list-style: none; margin: 0 0 1rem; padding: 0; text-align: left; display: inline-block; } .success-items li { padding: .5rem 0; border-bottom: 1px solid #eee; font-size: 15px; color: var(--ink); } .success-items li:last-child { border-bottom: none; } .success-note-error { color: #B23A2F; } .form-group { margin-bottom: 1.2rem; } .form-group label { display: block; font-weight: 500; font-size: 15px; color: var(--ink); margin-bottom: .4rem; } .form-group input, .form-group select { width: 100%; padding: .7rem .85rem; border: 1.5px solid #d9cbb8; border-radius: 8px; font-family: var(--body); font-size: 16px; color: var(--ink); background: var(--card); transition: .15s; } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--cane); box-shadow: 0 0 0 3px rgba(44,133,122,.1); } .form-note { background: var(--card); border-left: 4px solid var(--gold); padding: 1rem; margin: 1.5rem 0; border-radius: 6px; } .form-note p { font-size: 15px; line-height: 1.5; color: var(--ink); margin: 0; } .reserve-submit { width: 100%; padding: .9rem; font-size: 15px; margin-bottom: 1rem; } .reserve-submit:disabled { opacity: .6; cursor: not-allowed; } .form-fine-print { text-align: center; font-size: 13px; color: var(--tamarind); margin: 0; } .reservation-success { text-align: center; padding: 2rem; } .reservation-success h3 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: 1.3rem; margin-bottom: 1rem; } .reservation-success p { font-size: 15px; line-height: 1.6; color: var(--ink); margin-bottom: 1rem; } .success-note { font-family: var(--quote); font-style: italic; color: var(--tamarind); font-size: 14px; } .reservation-success button { margin-top: 1rem; } .founder-badge { width: 108px; height: 108px; border-radius: 50%; margin: 0 auto 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--parchment); background: radial-gradient(circle at 32% 30%, #2a7a55, var(--cane)); border: 3px double var(--gold); box-shadow: 0 6px 16px rgba(42,31,20,.22); } .founder-badge .fb-top { font-family: var(--label); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; } .founder-badge .fb-num { font-family: var(--display); font-weight: 700; font-size: 1.6rem; margin-top: .1rem; } /* ---- coming-soon merchandise (open access, country-filtered, worldwide) ---- */ .merch .ship-note { text-align: center; font-family: var(--label); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--cane); margin: -.7rem 0 1.3rem; } .merch .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; } .merch .chip { font-family: var(--label); font-size: 12.5px; font-weight: 500; letter-spacing: .03em; padding: .45rem .95rem; border-radius: 999px; border: 1px solid #e0d4bd; background: var(--card); color: var(--ink); cursor: pointer; transition: .15s; } .merch .chip:hover { border-color: var(--gold); } .merch .chip.active { background: var(--cane); color: var(--parchment); border-color: var(--cane); } .product .p-art { position: relative; } .product .coming { position: absolute; top: .6rem; left: .6rem; background: var(--gold); color: var(--ink); font-family: var(--label); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .55rem; border-radius: 999px; } .product .p-tag { font-family: var(--label); font-size: 11px; letter-spacing: .05em; color: var(--tamarind); text-transform: uppercase; margin-bottom: .3rem; } .product .p-notify { font-family: var(--label); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; background: transparent; color: var(--cane); border: 1px solid var(--cane); border-radius: 8px; padding: .65rem; cursor: pointer; } .product .p-notify:hover { background: var(--cane); color: var(--parchment); } /* saying-led cards (StoryPeople-style: art + the words first) */ .product .p-say { font-family: var(--display); font-weight: 700; font-style: italic; font-size: 1.12rem; line-height: 1.25; color: var(--ink); margin: .15rem 0 .9rem; flex: 1; } .merch-note { max-width: 560px; margin: 1.8rem auto 0; text-align: center; font-family: var(--body); font-size: 14px; color: var(--ink-soft); } .merch-note a { color: var(--coral); text-decoration: underline; cursor: pointer; font-weight: 500; } /* ---- pre-order cart drawer ---- */ .cart-overlay { position: fixed; inset: 0; background: rgba(42,31,20,.45); z-index: 70; opacity: 0; visibility: hidden; transition: opacity .2s; } .cart-overlay.open { opacity: 1; visibility: visible; } .cart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(380px, 90vw); z-index: 71; background: var(--parchment); box-shadow: -8px 0 30px rgba(42,31,20,.25); transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; } .cart-drawer.open { transform: translateX(0); } .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.2rem; border-bottom: 1px solid #e7ddc9; } .cart-head h2 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: 1.3rem; } .cart-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--ink); cursor: pointer; } .cart-body { flex: 1; overflow: auto; padding: 1rem 1.2rem; } .cart-empty, .cart-done { font-family: var(--quote); font-style: italic; text-align: center; line-height: 1.6; } .cart-empty { color: var(--tamarind); margin-top: 2rem; } .cart-done { color: var(--cane); padding: 1rem 0; } .cart-line { display: flex; gap: .7rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid #ece3d2; } .cart-line img { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; background: var(--pale); border: 1px solid #e7ddc9; } .cart-line .info { flex: 1; } .cart-line .nm { font-family: var(--body); font-weight: 500; font-size: 14px; } .cart-line .pr { font-family: var(--label); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tamarind); margin: .1rem 0 .3rem; } .cart-qty { display: flex; align-items: center; gap: .35rem; } .cart-qty button { width: 22px; height: 22px; border: 1px solid var(--cane); background: var(--card); color: var(--cane); border-radius: 5px; cursor: pointer; font: 600 13px/1 var(--label); } .cart-qty span { font-family: var(--body); font-size: 14px; min-width: 16px; text-align: center; } .cart-rm { margin-left: .4rem; background: none; border: none; color: var(--coral); cursor: pointer; font: 500 12px var(--label); text-transform: uppercase; letter-spacing: .04em; } .cart-foot { border-top: 1px solid #e7ddc9; padding: 1rem 1.2rem; } .cart-foot:empty { display: none; } .cart-total { display: flex; justify-content: space-between; font-family: var(--label); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; } .cart-note { font-family: var(--body); font-size: 12px; color: var(--ink-soft); margin: .5rem 0 .8rem; line-height: 1.45; } .cart-foot input { width: 100%; padding: .65rem .8rem; border: 2px solid var(--sea); border-radius: 8px; margin-bottom: .6rem; font-family: var(--body); font-size: 14px; background: var(--card); color: var(--ink); } .cart-foot .reserve { width: 100%; font-family: var(--label); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; background: var(--gold); color: var(--ink); border: none; border-radius: 8px; padding: .75rem; cursor: pointer; } .cart-foot .reserve:hover { background: var(--coral); color: var(--parchment); } /* active-filter indicator above the grid */ #filter-note { display: none; max-width: 620px; margin: .3rem auto -.2rem; text-align: center; font-family: var(--label); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tamarind); } #filter-note button { background: none; border: none; color: var(--coral); cursor: pointer; font: inherit; text-decoration: underline; margin-left: .4rem; } /* about section (nav target) */ .about { max-width: 640px; margin: 0 auto; padding: 4rem 1rem 1rem; text-align: center; } .about h2 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: 1.5rem; margin-bottom: .6rem; } .about p { font-family: var(--body); font-size: 17px; line-height: 1.6; color: var(--ink-soft); } /* free daily-teaser label + per-edition lock card (paid editions) */ .teaser-label { grid-column: 1 / -1; text-align: center; margin: 0 0 -.3rem; font-family: var(--label); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--coral); } .lock-card { grid-column: 1 / -1; text-align: center; background: var(--card); border: 2px dashed var(--cane); border-radius: 14px; padding: 1.6rem 1.2rem; margin-top: .5rem; } .lock-card .lock-ico { font-size: 1.8rem; line-height: 1; } .lock-card h3 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: 1.3rem; margin: .35rem 0 .4rem; } .lock-card p { font-family: var(--body); font-size: 14px; line-height: 1.5; color: var(--ink-soft); max-width: 46ch; margin: 0 auto 1rem; } /* theme filter (shared 8-theme system) — appears on every edition tab */ .theme-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .2rem 0 1rem; } .theme-chips .tlabel { font-family: var(--label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tamarind); margin-right: .15rem; } .theme-chip { font-family: var(--label); font-size: 12px; font-weight: 500; padding: .35rem .75rem; border-radius: 999px; border: 1px solid #e0d4bd; background: var(--card); color: var(--ink); cursor: pointer; transition: .15s; } .theme-chip:hover { border-color: var(--gold); } .theme-chip.active { background: var(--cane); color: var(--parchment); border-color: var(--cane); } .story-card .theme-pill { display: inline-block; align-self: flex-start; font-family: var(--label); font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--tamarind); border: 1px solid #e0d4bd; border-radius: 999px; padding: 1px 8px; margin-top: .35rem; } .unlock-form { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: .7rem; } .unlock-form input { padding: .6rem .8rem; border: 2px solid var(--sea); border-radius: 8px; font-family: var(--body); font-size: 14px; min-width: 210px; background: var(--card); color: var(--ink); } .unlock-form button { font-family: var(--label); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; background: var(--cane); color: var(--parchment); border: none; border-radius: 8px; padding: .6rem 1.2rem; cursor: pointer; } .unlock-form button:hover { background: var(--coral); } .lock-link { background: none; border: none; color: var(--coral); text-decoration: underline; cursor: pointer; font-family: var(--label); font-size: 12px; } /* ---- site footer (StoryPeople-style columns) ---- */ footer { background: var(--cane); color: var(--parchment); border-top: 3px solid var(--gold); padding: 2.4rem 1rem 1.6rem; } .foot-cols { max-width: 920px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2rem 3.5rem; justify-content: center; } .foot-col h4 { font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 .7rem; } .foot-col ul { list-style: none; margin: 0; padding: 0; } .foot-col li { margin: 0 0 .45rem; } .foot-col a { color: var(--parchment); text-decoration: none; font-size: .9rem; opacity: .9; display:inline-flex; align-items:center; gap:.5rem; } .foot-col .ico { width:15px; height:15px; flex:none; fill:currentColor; } .foot-col a:hover { color: var(--gold); opacity: 1; text-decoration: underline; } .foot-base { max-width: 920px; margin: 1.8rem auto 0; padding-top: 1.2rem; border-top: 1px solid rgba(247,240,227,.18); text-align: center; font-size: .8rem; color: rgba(247,240,227,.7); } /* ============================================================ Added — split welcome hero, edition pages, login portal ============================================================ */ /* ---- StoryPeople-style split welcome hero (image one side, text the other) ---- */ .welcome { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: 1140px; margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) 1.25rem; } .welcome-art { border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 10px 30px rgba(42,31,20,.18); border: 1px solid rgba(247,240,227,.25); aspect-ratio: 5 / 4; } .welcome-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .welcome-text { text-align: left; } .welcome-text .logo { text-align: left; margin-bottom: 1.1rem; } .welcome-text .logo .logo-name { font-size: clamp(2rem, 4.4vw, 3rem); } .welcome-text .logo .logo-rule { margin-left: 0; } .welcome-lede { font-family: var(--quote); font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--cream); margin: 0 0 1.6rem; max-width: 34ch; } .welcome .hero-cta { justify-content: flex-start; } @media (max-width: 760px) { .welcome { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; } .welcome-text, .welcome-text .logo { text-align: center; } .welcome-text .logo .logo-rule { margin-left: auto; margin-right: auto; } .welcome-lede { margin-left: auto; margin-right: auto; } .welcome .hero-cta { justify-content: center; } .welcome-art { order: -1; } } /* ---- per-edition page header ---- */ .ed-header { max-width: 880px; margin: 0 auto; padding: clamp(2rem, 4vw, 3.2rem) 1.25rem 1rem; text-align: center; } .ed-header .ed-flag { font-size: 2.4rem; line-height: 1; } .ed-header h1 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .5rem 0 .2rem; } .ed-header .ed-desc { font-family: var(--label); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .15em; color: var(--coral); } .ed-header .ed-lede { font-family: var(--quote); font-style: italic; color: var(--tamarind); font-size: 1.05rem; margin-top: .7rem; } .ed-controls { max-width: 760px; margin: 0 auto; padding: 0 1rem; } /* ---- login / create-account portal ---- */ .auth-wrap { max-width: 1040px; margin: 0 auto; padding: clamp(2rem,5vw,4rem) 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; } .auth-art { border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 10px 30px rgba(42,31,20,.12); border: 1px solid #e7ddc9; aspect-ratio: 4/5; } .auth-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .auth-card { background: var(--card); border: 1px solid #e7ddc9; border-radius: 16px; padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: 0 6px 18px rgba(42,31,20,.08); } .auth-card .eyebrow { font-family: var(--label); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); } .auth-card h1 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: 1.9rem; margin: .3rem 0 .5rem; } .auth-card .sub { color: var(--ink-soft); font-size: .95rem; line-height: 1.55; margin-bottom: 1.3rem; } .auth-field { display: block; text-align: left; margin-bottom: 1rem; } .auth-field span { display: block; font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--tamarind); margin-bottom: .35rem; } .auth-field input { width: 100%; padding: .75rem .9rem; border: 1px solid #d9ccaf; border-radius: 9px; font-family: var(--body); font-size: 1rem; background: var(--parchment); color: var(--ink); } .auth-field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); } .auth-submit { width: 100%; font-family: var(--label); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; background: var(--coral); color: var(--parchment); border: none; border-radius: 10px; padding: .85rem; cursor: pointer; margin-top: .3rem; } .auth-submit:hover { background: #a8431a; } .auth-alt { text-align: center; font-size: .9rem; color: var(--ink-soft); margin-top: 1.1rem; } .auth-alt button { background: none; border: none; color: var(--coral); cursor: pointer; font: inherit; text-decoration: underline; } .auth-note { font-size: 12px; color: var(--tamarind); margin-top: 1.2rem; line-height: 1.5; } .auth-done { text-align: center; } .auth-done .tick { font-size: 2.4rem; } @media (max-width: 760px) { .auth-wrap { grid-template-columns: 1fr; } .auth-art { display: none; } } /* ============================================================ Added — per-island calendar PRODUCT pages (StoryPeople-style) ============================================================ */ .product-page { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: 1100px; margin: 0 auto; padding: clamp(1.6rem, 4vw, 3.4rem) 1.25rem 1rem; } .pp-info { text-align: left; } .pp-eyebrow { font-family: var(--label); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); } .pp-info h1 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.08; margin: .35rem 0 .5rem; } .pp-tag { font-family: var(--quote); font-style: italic; font-size: 1.12rem; color: var(--tamarind); margin-bottom: 1.1rem; } .pp-price { font-family: var(--display); font-weight: 700; font-size: 1.7rem; color: var(--ink); margin-bottom: 1rem; } .pp-buy { display: inline-block; font-family: var(--label); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; background: var(--coral); color: var(--parchment); border: none; border-radius: 10px; padding: .85rem 1.6rem; cursor: pointer; text-decoration: none; } .pp-buy:hover { background: #a8431a; } .pp-buy.ghost { background: transparent; color: var(--cane); border: 1.5px solid var(--cane); margin-left: .5rem; } .pp-buy.ghost:hover { background: var(--cane); color: var(--parchment); } .pp-specs { list-style: none; margin: 1.4rem 0 1.1rem; padding: 0; } .pp-specs li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; color: var(--ink-soft); font-size: .95rem; } .pp-specs li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); } .pp-desc { color: var(--ink-soft); font-size: .98rem; line-height: 1.6; } /* spiral desk-calendar mockup (the product "image") */ .cal-mock { max-width: 400px; margin: 0 auto; } .cal-spiral { display: flex; justify-content: center; gap: 16px; padding-left: 4px; position: relative; z-index: 2; } .cal-spiral i { width: 9px; height: 20px; margin-bottom: -9px; border: 2px solid var(--tamarind); border-bottom: none; border-radius: 7px 7px 0 0; background: linear-gradient(#fffdf7, #d9ccae); } .cal-page { position: relative; background: var(--card); border: 1px solid #e7ddc9; border-radius: 6px; box-shadow: 0 22px 44px rgba(42,31,20,.22), 0 6px 0 -1px #f4eddd, 0 7px 0 -1px #e3d8c1, 0 12px 0 -1px #f4eddd, 0 13px 0 -1px #e3d8c1; overflow: hidden; } .cal-art { aspect-ratio: 4 / 3; background: var(--pale); } .cal-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .cal-body { padding: 1.1rem 1.2rem 1.4rem; text-align: center; } .cal-day { font-family: var(--label); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); } .cal-saying { font-family: var(--display); font-weight: 700; font-style: italic; font-size: 1.3rem; line-height: 1.25; color: var(--ink); margin: .45rem 0 .3rem; } .cal-mean { font-family: var(--body); font-size: 13px; color: var(--ink-soft); } .cal-base { height: 12px; margin: 0 18px; background: linear-gradient(#e7ddc9, #d3c4a4); border-radius: 0 0 10px 10px; box-shadow: 0 10px 18px rgba(42,31,20,.12); } /* Hardcover book mockup — the product "image" for The Gallery, standing in until there is a real photograph of the printed book. Cane-green cloth board with foil-stamped title, per the spec in product-specs.html. SWAP: replace .book-mock in gallery.html with an once a photo exists. */ /* --foil is a lightened rum gold used only on the dark cloth board: plain --gold (#D9962B) is 2.49:1 on --cane-dark and fails WCAG AA even at heading size. #F5D89F is 4.54:1 — passes AA for normal text. */ .book-mock { --foil: #F5D89F; max-width: 360px; margin: 0 auto; perspective: 1400px; } .book-cover { position: relative; aspect-ratio: 1 / 1; border-radius: 4px 9px 9px 4px; background: linear-gradient(105deg, rgba(255,255,255,.10) 0 42%, rgba(0,0,0,.14) 100%), var(--cane-dark); box-shadow: 0 26px 48px rgba(42,31,20,.30), inset 0 0 0 1px rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 2.2rem; overflow: hidden; } /* the sewn spine */ .book-cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 20px; background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.06)); border-right: 1px solid rgba(255,255,255,.09); } .book-rule { width: 54px; height: 1px; background: var(--gold); opacity: .85; margin: .9rem 0; } .book-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.1; color: var(--foil); letter-spacing: .01em; } .book-sub { font-family: var(--label); font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream); } .book-byline { font-family: var(--quote); font-style: italic; font-size: .95rem; color: var(--foil); } /* page block along the fore-edge */ .book-mock::after { content: ""; display: block; height: 10px; margin: -6px 10px 0 26px; background: linear-gradient(#f4eddd, #ddd0b4); border-radius: 0 0 5px 5px; box-shadow: 0 10px 18px rgba(42,31,20,.14); } /* ---- the four parts of The Gallery ---- */ .parts { max-width: 1000px; margin: 0 auto; padding: clamp(2rem, 4vw, 3.6rem) 1.25rem; text-align: center; } .parts h2 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: 1.7rem; } .parts .sub { font-family: var(--quote); font-style: italic; color: var(--tamarind); margin: .3rem 0 0; } .parts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem; margin-top: 1.8rem; text-align: left; } .part-card { background: var(--card); border: 1px solid #e7ddc9; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 12px rgba(42,31,20,.06); } .part-card .pc-art { aspect-ratio: 16 / 9; background: var(--pale); } .part-card .pc-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .part-card .pc-time { font-family: var(--label); font-weight: 500; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); padding: 1.1rem 1.3rem 0; } .part-card h3 { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--cane); margin: .3rem 0 .4rem; padding: 0 1.3rem; } .part-card p:not(.pc-time) { font-size: .92rem; line-height: 1.55; color: var(--ink-soft); padding: 0 1.3rem 1.2rem; } /* ---- the shop grid: every product on one page (StoryPeople collection pattern) ---- */ .shelf { max-width: 1080px; margin: 0 auto; padding: clamp(2rem, 4vw, 3.4rem) 1.25rem; } .shelf-head { text-align: center; max-width: 52ch; margin: 0 auto 2rem; } .shelf-head h1 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: clamp(1.9rem, 5vw, 2.6rem); } .shelf-head p { font-family: var(--quote); font-style: italic; font-size: 1.08rem; color: var(--tamarind); margin-top: .6rem; } .shelf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; } .shelf-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid #e7ddc9; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 12px rgba(42,31,20,.06); text-decoration: none; color: inherit; transition: box-shadow .18s, transform .18s; } .shelf-card:hover { box-shadow: 0 10px 24px rgba(42,31,20,.14); transform: translateY(-2px); } .shelf-art { aspect-ratio: 4 / 3; background: var(--pale); } .shelf-art img { width: 100%; height: 100%; object-fit: cover; display: block; } /* book card gets the cloth board instead of a photo */ .shelf-art.is-book { --foil: #F5D89F; background: var(--cane-dark); display: grid; place-items: center; } .shelf-art.is-book span { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--foil); text-align: center; line-height: 1.15; padding: 0 1rem; } .shelf-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; } .shelf-body h2, .shelf-body h3 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--cane); } #whats-for-sale .shelf-grid { grid-template-columns: repeat(6, 1fr); gap: .9rem; } @media (max-width: 1040px) { #whats-for-sale .shelf-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { #whats-for-sale .shelf-grid { grid-template-columns: repeat(2, 1fr); } } #whats-for-sale .shelf-body { padding: .8rem .9rem 1rem; } #whats-for-sale .shelf-head h2 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: clamp(1.6rem, 4vw, 2.1rem); } .shelf-body .sc-note { font-size: .88rem; line-height: 1.5; color: var(--ink-soft); } .shelf-price { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--ink); margin-top: auto; padding-top: .5rem; } .shelf-card.is-bundle { border-color: var(--coral); box-shadow: 0 4px 16px rgba(203,90,44,.14); } .shelf-foot { text-align: center; margin-top: 1.8rem; } .shelf-foot .fine { font-size: .88rem; color: var(--ink-soft); margin-top: .8rem; } /* "a taste of what's inside" — one sample per topic */ .samples { max-width: 1000px; margin: 0 auto; padding: clamp(2rem, 4vw, 3.6rem) 1.25rem; text-align: center; } .samples h2 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: 1.7rem; } .samples .sub { font-family: var(--quote); font-style: italic; color: var(--tamarind); margin: .3rem 0 0; } .sample-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; margin-top: 1.8rem; text-align: left; } .sample-card { background: var(--card); border: 1px solid #e7ddc9; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 12px rgba(42,31,20,.06); display: flex; flex-direction: column; } .sample-card .s-art { aspect-ratio: 16 / 9; background: var(--pale); } .sample-card .s-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .sample-card .s-body { padding: 1rem 1.1rem 1.2rem; } .sample-card .s-topic { font-family: var(--label); font-weight: 500; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); } .sample-card .s-saying { font-family: var(--display); font-weight: 700; font-style: italic; font-size: 1.12rem; line-height: 1.25; color: var(--ink); margin: .35rem 0 .5rem; } .sample-card .s-mean { font-family: var(--body); font-size: 16px; line-height: 1.5; color: var(--ink-soft); } /* ---- Meet Mrs. Boyce (storyteller / avatar) ---- */ .meet { max-width: 1000px; margin: 0 auto; padding: clamp(2rem, 4vw, 3.6rem) 1.25rem; display: grid; grid-template-columns: 260px 1fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; } .meet-portrait { position: relative; justify-self: center; } .meet-portrait img { width: 100%; max-width: 260px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; border: 3px solid var(--gold); background: var(--pale); box-shadow: 0 16px 40px rgba(42,31,20,.18); display: block; } .meet-flag { position: absolute; bottom: -12px; right: -12px; font-size: 1.5rem; background: var(--card); border: 2px solid var(--gold); border-radius: 999px; width: 44px; height: 44px; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(42,31,20,.2); } .meet-eyebrow { font-family: var(--label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tamarind); margin-bottom: .3rem; } .meet-text h2 { font-family: var(--display); font-weight: 700; color: var(--cane); font-size: clamp(1.7rem, 4vw, 2.2rem); } .meet-lede { font-family: var(--quote); font-size: 1.05rem; line-height: 1.65; color: var(--ink); margin: .7rem 0 0; max-width: 46ch; } .meet-note { font-family: var(--label); font-size: 12.5px; letter-spacing: .02em; color: var(--coral); margin-top: 1rem; } @media (max-width: 640px) { .meet { grid-template-columns: 1fr; text-align: center; justify-items: center; } .meet-lede { margin-left: auto; margin-right: auto; } } /* ---- Island Ambassador Stories preview (bajan/trinidad/jamaica/haiti.html) ---- Shared here (not inline per-page) since these four pages already pull all their styling from this file rather than keeping their own